Javascript - innerHTML 不适用于 HTML 选择菜单
Posted
技术标签:
【中文标题】Javascript - innerHTML 不适用于 HTML 选择菜单【英文标题】：Javascript - innerHTML not working with HTML select menus 【发布时间】：2011-02-13 20:38:23 【问题描述】：在我的 html 页面中，我有 2 个 ID 为“月”和“日”的选择菜单 - 页面加载时“日”为空，“月”有 12 个选项，值 1-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 :) 【参考方案1】：我建议不要在
select上使用innerHTML - 它只是 似乎错了。select元素有易于使用的方法来添加新的 选项：`document.getElementById('day').options.add(new Option("1", "1"))`
上述对象创建中的参数为：
new Option("optionText", "optionValue")
只是想补充一下这个答案，因为它可能会向看到这篇文章的人澄清。
【讨论】：
【参考方案2】：这是 IE 的一个已知问题。
包含解决方法的知识库文章： 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 您能否编辑您的帖子，突出显示代码并单击编辑器中的代码图标，以便大括号正确通过。需要确切了解您要做什么。 我测试了你的代码，在我删除你的 cmets 并为 if/else 中的每一行添加分号后，它在 Firefox 中对我有用。如果你仍然需要它，我可以发布我修改的内容，但我推荐 RoToRa 的答案，而不是使用 innerHTML，尤其是因为 innerHTML 在 IE 中不起作用 你能发布我的代码版本和你的修改吗？正如我在摆脱 cmets 并像你说的那样添加分号后刚刚尝试过的，它仍然不起作用！谢谢【参考方案3】：您不应该使用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);
现在包括闰年！
【讨论】：
使用newOption.text 优先于innerHTML。更可靠并避免 HTML 转义问题。
您可能需要检查闰年的逻辑——它们大约每 4 年发生一次。
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0) ) days = 29;其他天 = 28;
感谢您为我指出并找到它！修改了我的代码并在到期时留下了信用。
嗨，乔纳森，感谢您的帮助 - 我尝试将代码放入，但不幸的是，我几天都得到了空的选择框。不太清楚发生了什么，我在 OSX 上使用 Firefox 3.6，如果这有什么不同的话【参考方案4】：
这有点小技巧，但它很小，可以在 FF 和 IE 中使用，作为 IE 无法更改所选元素上的 innerHTML 的解决方法。
function swapInnerHTML(objID,newHTML)
var el=document.getElementById(objID);
el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
【讨论】：
【参考方案5】：另一种解决方案是使用 Jquery
$('#day').html('<option value="1">1</option><option value="2">2</option>');
【讨论】：
【参考方案6】：我来到这个问题并想分享我的问题/答案，希望它可以帮助其他人。
我有这个不起作用：
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>';
【讨论】：
【参考方案7】：我将概括和总结如下问题和对我有用的解决方案：
问题：
javascript innerHTML 不再适用于选定的 HTML 元素。
说明：
用于动态分配 HTML 内容的标准 Javascript 语法 (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>
)
;
【讨论】：
【参考方案8】：这个怎么样：
<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>
【讨论】：
以上是关于Javascript - innerHTML 不适用于 HTML 选择菜单的主要内容，如果未能解决你的问题，请参考以下文章
Javascript innerHTML 不适用于图像，但适用于文本？
innerHTML 不适用于 getElementsByClassName