Javascript - innerHTML not working with HTML select menus

后端未结

关注

 8  1379

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 Janua

相关标签:

8条回答

情深已故

2020-11-30 15:33

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

0 讨论(0)

挽巷

2020-11-30 15:34

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>

0 讨论(0)

有刺的猬

2020-11-30 15:38

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!

0 讨论(0)

忘掉有多难

2020-11-30 15:42
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>');
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2020-11-30 15:42

another solution is to use Jquery

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-11-30 15:54

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>

0 讨论(0)

1 2 下一页