Javascript - innerHTML not working with HTML select menus_问答_开发者

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='<opti开发者_StackOverflow社区on 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

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.

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>

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!

another solution is to use Jquery

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

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>');
}

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>';
}

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>
    )
;

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>