logo标签列表

Javascript - innerHTML不能与HTML选择菜单一起使用

javascriptinnerhtml
5
在我的HTML页面中，我有两个带有ID“month”和“day”的选择菜单。当页面加载时，“day”为空，“month”具有12个选项，值为1-12，对应于一月至十二月。
“month”具有一个onchange事件，调用此函数：
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
}

我认为我的意图相当明确，除了ID为“day”的select的innerHTML不被填充之外一切都正常运行，无论您选择哪个月份。我知道问题出在这个函数阶段，因为当我将if、elseif和else的代码改成警报或类似的代码时，它能够正常工作。

有人知道innerHTML的问题在哪里吗？

谢谢

编辑：使用Firefox 3.6

我的问题是 innerHtml 和 innerHTML 的区别 :) - Siddharth
8个回答
16
我建议不要在
5

这是IE已知的问题。

KB文章及解决方法： http://support.microsoft.com/kb/276228

另外：重复问题： innerHTML replace does not reflect

编辑：这是基于您的代码的工作示例：

<!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>
抱歉，我应该补充一下，我正在使用Firefox。 - Deacon
你能否编辑你的帖子，突出显示代码并在编辑器中点击代码图标，以便大括号正确传递。需要确切地了解你想要做什么。 - David
1
我测试了你的代码，在我删除了你的注释并为if/else中的每一行添加了分号后，它在Firefox中对我有效。如果你仍然需要，我可以发布我所修改的内容，但我建议使用RoToRa的答案而不是使用innerHTML，特别是因为innerHTML在IE中无法工作。 - David
你能否发布一下你修改过后的我的代码版本吗？因为我按照你说的去掉了注释并加上了分号，但是它仍然无法工作！谢谢。 - Deacon
5

您不应该使用 innerHTML 来修改标签。您应该使用 removeChild(element); 和 appendChild(element);

首先，将您的选择框存储在一个变量中以提高可读性和编辑性；

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

因此，通过你的代码和我的代码，你将得到以下结果：
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);
    }
}

现在包括闰年！

1
使用newOption.text而不是innerHTML。这样更可靠，避免了HTML转义问题。 - bobince
1
你可能需要检查闰年的逻辑 - 它们大约每4年发生一次。 - Joe
1
如果 (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0) ) days = 29; 否则 days = 28; - Justin Gregoire
谢谢你指出了我的问题并找到了它！我修改了我的代码，并给予了应有的荣誉。 - Jonathan Czitkovics
嗨，乔纳森，感谢您的帮助 - 我尝试将代码放入其中，但不幸的是我只得到了空的选择框。不太确定出了什么问题，我正在使用OSX上的Firefox 3.6，如果这有任何区别。 - Deacon
2
另一个解决方案是使用JQuery： $('#day').html('<option value="1">1</option><option value="2">2</option>'); 该代码段将在id为"day"的HTML元素中添加两个选项。
1
这有点像是一个 hack，但它很小且在 FF 和 IE 中都可以工作，作为 IE 无法更改 select 元素的 innerHTML 的解决方法。
function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}
0

我将问题和解决方案总结如下：

问题：

Javascript innerHTML 不再在选择 HTML 元素上工作。

描述：

标准的 Javascript 语法用于动态分配 HTML 内容（document.getElementById().innerHTML=...），自从某个未知版本的操作系统或最常用的浏览器以来，它不再在 select HTML 元素上工作；在选择元素上使用它会导致浏览器崩溃。

解决方案：

为了动态地将 HTML 内容分配给 HTML select 元素，而不是使用标准语法：

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

使用以下语法：
var select = document.getElementById(HTML_select_element_id);
select.outerHTML = 
    select.outerHTML.replace(
        select.innerHTML
        ,
        <HTML contents to assign>
    )
;
0

我来到这个问题并想分享我的问题/答案，希望能帮助其他人。

我有一个不起作用的代码：

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

我把它改成了这样，确实起作用了：

function change_select() {
    var sel = document.getElementById('my-id');
    sel.innerHTML = 'option>new item</option>';
}
-1
这样怎么样：
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接