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

IT技术 javascript innerhtml
2021-03-22 09:30:50

在我的 HTML 页面中，我有 2 个选择菜单，ID 分别为“月”和“日”——页面加载时“日”为空，“月”有 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

6个回答

我建议不要在 a 上使用 innerHTML select- 这似乎是错误的。select元素具有易于使用的方法来添加新选项：

`document.getElementById('day').options.add(new Option("1", "1"))`

上述对象创建中的参数为：

new Option("optionText", "optionValue")

只是想添加到这个答案中，因为它可能会向阅读这篇文章的人澄清。

这是 IE 的一个已知问题。

带有解决方法的知识库文章：http : //support.microsoft.com/kb/276228

另外：dupe of： innerHTML 替换不反映

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

<!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>
我测试了你的代码，在删除你的评论并为 if/else 中的每一行添加分号等之后，它在 Firefox 中对我有用。如果你仍然需要它，我可以发布我修改的内容，但我推荐 RoToRa 的答案而不是使用innerHTML，尤其是因为innerHTML 不会在IE 中工作
2021-04-30 09:30:50
抱歉，我应该补充一下，我正在使用 Firefox
2021-05-05 09:30:50
您能否编辑您的帖子，突出显示代码并单击编辑器中的代码图标，以便大括号正确通过。需要确切地了解您正在尝试做什么。
2021-05-05 09:30:50
您能否将我的代码版本与您的修改一起发布？正如我在删除评论并像您说的那样添加分号后刚刚尝试过，但它仍然不起作用！谢谢
2021-05-09 09:30:50

您不应该使用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);
    }
}

现在包括闰年！

您可能想要检查闰年的逻辑——它们大约每 4 年发生一次。
2021-04-29 09:30:50
newOption.text优先使用innerHTML. 更可靠并避免 HTML 转义问题。
2021-05-12 09:30:50
if (年 % 400 == 0 || (年 % 4 == 0 && 年 % 100 != 0) ) 天 = 29; 否则天数 = 28;
2021-05-13 09:30:50
感谢您为我指出并找到它！修改了我的代码并在应得的地方留下了信用。
2021-05-13 09:30:50
嗨，乔纳森，谢谢你的帮助 - 我试着把代码放进去，但不幸的是我几天都没有得到空的选择框。不太确定发生了什么，如果这有什么不同，我在 OSX 上使用 Firefox 3.6
2021-05-20 09:30:50

这是一个小技巧，但它很小并且在 FF 和 IE 中都可以作为 IE 无法更改选择元素上的 innerHTML 的解决方法。

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

另一个解决方案是使用 Jquery

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

其它你可能感兴趣的问题
上一篇附加的新行与前一行（行）的行为不同 下一篇如何更改 angularjs $http.jsonp 的标头