Javascript - innerHTML not working with HTML select menus

M

8

5

In my HTML page I have 2 select menus with IDs "month" and "day" - "day" is empty when the page loads, "month" has 12 options with values 1-12 corresponding to January - December.

"month" has an onchange event which calls this function:

function showOutboundDays(month)
{
if(month==4 || month==6 || month==9 || month==11)
    document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>'; etc. up to 30
else if(month==2)
    document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 28
else 
    document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 31
}

(just imagine there are braces around the option tags to help you see...)

I think it's pretty clear to see what I'm trying to achieve...and everything works fine apart from the innerHTML of the select with ID "day" doesn't get filled at all, regardless of what month you pick. And I know the problem is with this stage of the function because when I change the if, elseif and else code-to-be-executed to alerts or something similar, it works fine.

Does anybody know what the problem with the innerHTML is?

Thanks

EDIT: Using Firefox 3.6

Macao answered 29/4, 2010 at 14:45 Comment(1)

My issue was innerHtml vs innerHTML :) – Ochrea 5/9, 2018 at 12:4

F

5

This is a known issue for IE.

KB article with workaround: http://support.microsoft.com/kb/276228

Also: dupe of: innerHTML replace does not reflect

EDIT: Here is my working sample based on your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Selects</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
 </style>
 <script>
function showOutboundDays(month) 
{ 
    if(month==4 || month==6 || month==9 || month==11) 
        document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>';
    else if(month==2) 
        document.getElementById('day').innerHTML='<option value="1">3</option><option value="1">4</option>';
    else  
        document.getElementById('day').innerHTML='<option value="1">5</option><option value="1">6</option>';
}
 </script>
 </head>
<body>
    <select onchange="showOutboundDays(this.value);">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <br />
    <select id="day">
    </select>
</body>
</html>

Furcate answered 29/4, 2010 at 14:49 Comment(4)

Sorry, I should have added, I'm using Firefox – Macao 29/4, 2010 at 14:50

Can you edit your post, highlight the code and click the code icon in the editor so the braces make it through correctly. Need to see exactly what you are trying to do. – Furcate 29/4, 2010 at 14:52

I tested your code and it worked for me in Firefox after I removed your comments and added semicolons for each line in the if/else, etc. I can post what I modified if you still need it, but I recommend RoToRa's answer instead of using innerHTML, especially since innerHTML isn't going to work in IE – Furcate 29/4, 2010 at 15:5

Would you be able to post the version of my code with your modifications? As I've just tried it after getting rid of the comments and adding the semi-colons like you said, and it still doesn't work! Thanks – Macao 29/4, 2010 at 15:46

H

16

I would suggest simply not to use innerHTML on a select - it just seems wrong. select elements have easy to use methods to add new options:
`document.getElementById('day').options.add(new Option("1", "1"))`

the parameters in the above object creation are:

new Option("optionText", "optionValue")

Just wanted to add to this answer, because it might clarify to someone who get to this post.

Hiller answered 29/4, 2010 at 14:57 Comment(0)

F

5

This is a known issue for IE.

KB article with workaround: http://support.microsoft.com/kb/276228

Also: dupe of: innerHTML replace does not reflect

EDIT: Here is my working sample based on your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Selects</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
 </style>
 <script>
function showOutboundDays(month) 
{ 
    if(month==4 || month==6 || month==9 || month==11) 
        document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>';
    else if(month==2) 
        document.getElementById('day').innerHTML='<option value="1">3</option><option value="1">4</option>';
    else  
        document.getElementById('day').innerHTML='<option value="1">5</option><option value="1">6</option>';
}
 </script>
 </head>
<body>
    <select onchange="showOutboundDays(this.value);">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <br />
    <select id="day">
    </select>
</body>
</html>

Furcate answered 29/4, 2010 at 14:49 Comment(4)

Sorry, I should have added, I'm using Firefox – Macao 29/4, 2010 at 14:50

Can you edit your post, highlight the code and click the code icon in the editor so the braces make it through correctly. Need to see exactly what you are trying to do. – Furcate 29/4, 2010 at 14:52

I tested your code and it worked for me in Firefox after I removed your comments and added semicolons for each line in the if/else, etc. I can post what I modified if you still need it, but I recommend RoToRa's answer instead of using innerHTML, especially since innerHTML isn't going to work in IE – Furcate 29/4, 2010 at 15:5

Would you be able to post the version of my code with your modifications? As I've just tried it after getting rid of the comments and adding the semi-colons like you said, and it still doesn't work! Thanks – Macao 29/4, 2010 at 15:46

P

5

You should not be using innerHTML to modify tags. You should be using removeChild(element); and appendChild(element);

First you set your select box in a variable for legibility and editing purposes;

var select = document.getElementById('days');

Then you clear the select box

while ( select.childNodes.length >= 1 )
{
    select.removeChild(select.firstChild);       
}

Finally you fill it again with the appropriate values

for(var i=1;i<=days;i++)
{
    newOption = document.createElement('option');
    newOption.value=i;
    newOption.text=i;
    select.appendChild(newOption);
}

So at the end with your code and my code here you get the following:

function showOutboundDays(month, year)
{
    var days=null;

    if(month==4 || month==6 || month==9 || month==11)
        days=30;
    else if(month==2)
    {
        //Do not forget leap years!!!
        if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) //Provided by Justin Gregoire
        {
            days=29;
        }
        else
        {
            days=28;
        }
    }
    else 
        days=31;


    var select = document.getElementById('days');

    while ( select.childNodes.length >= 1 )
    {
        select.removeChild(select.firstChild);       
    }

    for(var i=1;i<=days;i++)
    {
        newOption = document.createElement('option');
        newOption.value=i;
        newOption.text=i;
        select.appendChild(newOption);
    }
}

Leap years are now included!

Pietje answered 29/4, 2010 at 15:6 Comment(5)

Use newOption.text in preference to innerHTML. More reliable and avoids HTML-escaping issues. – Barnaby 29/4, 2010 at 15:15

You may want to check your logic for leap years -- they happen roughly once every 4 years. – Swashbuckler 29/4, 2010 at 15:36

if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0) ) days = 29; else days = 28; – Denticulate 29/4, 2010 at 16:12

Thank you for pointing it out for me and finding it too! Modified my code and left credit where its due. – Pietje 29/4, 2010 at 16:16

Hi Jonathan, Thanks for your help - I tried putting the code in but unfortunately I just get the empty select box for days. Not quite sure what's up, I'm using Firefox 3.6 on OSX if that makes any difference – Macao 29/4, 2010 at 16:26

E

2

another solution is to use Jquery

$('#day').html('<option value="1">1</option><option value="2">2</option>');

Estimate answered 21/10, 2014 at 9:30 Comment(0)

B

1

This is a bit of a hack but it's tiny and works in both FF and IE as a workaround to IE's inability to change innerHTML on select elements.

function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}

Babettebabeuf answered 27/9, 2012 at 7:47 Comment(0)

O

0

I came to this question and wanted to share my problem/answer hoping it may help others.

I had this which did not work:

function change_select() {
    var sel = document.getElementById('my-id').innerHTML;
    sel = '<option>new item</option>';
}

I changed it to this which did work:

function change_select() {
    var sel = document.getElementById('my-id');
    sel.innerHTML = 'option>new item</option>';
}

Once answered 24/10, 2014 at 16:37 Comment(0)

C

0

I would generalize and summarize as follows the issue and the solution that worked for me:

Problem:

Javascript innerHTML not working on select HTML elements any more.

Description:

The standard Javascript syntax to dinamically assign HTML contents (document.getElementById().innerHTML=...) does not work any more on the select HTML elements since an unknown version of (probably all) either operating systems or most used browsers; using it on a select element causes the browser to crash.

Solution:

To dinamically assign HTML contents to an HTML select element, instead of using the standard syntax:

document.getElementById(HTML_select_element_id).innerHTML = <HTML contents to assign>

use this syntax:

var select = document.getElementById(HTML_select_element_id);
select.outerHTML = 
    select.outerHTML.replace(
        select.innerHTML
        ,
        <HTML contents to assign>
    )
;

Caveat answered 16/6, 2016 at 8:43 Comment(0)

R

-1

How about this:

<div style="display:inline" id=A><select>...</select></div A>

<script>
obj = document.getElementById("A");
newSel = "<select><option>New 1</select>";
obj.innerHTML = newSel;
</script>

Rab answered 28/1, 2016 at 0:57 Comment(0)

Recommended topics

Hot tags