Javascript - innerHTML 不能与 HTML 选择菜单一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2738254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - innerHTML not working with HTML select menus
提问by Deacon
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.
在我的 HTML 页面中，我有 2 个选择菜单，ID 为“月”和“日”-页面加载时“日”为空，“月”有 12 个选项，其值 1-12 对应于一月 - 十二月。
"month" has an onchange event which calls this function:
"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
}
(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.
我认为很清楚我想要实现的目标......除了ID为“day”的select的innerHTML完全没有被填充之外，一切都很好，无论你选择哪个月份。而且我知道问题出在函数的这个阶段，因为当我将要执行的 if、elseif 和 else 代码更改为警报或类似的东西时，它工作正常。
Does anybody know what the problem with the innerHTML is?
有人知道innerHTML的问题是什么吗？
Thanks
谢谢
EDIT: Using Firefox 3.6
编辑：使用 Firefox 3.6
采纳答案by David
This is a known issue for IE.
这是 IE 的已知问题。
KB article with workaround: http://support.microsoft.com/kb/276228
带有解决方法的知识库文章：http: //support.microsoft.com/kb/276228
Also: dupe of: innerHTML replace does not reflect
另外：dupe of： innerHTML 替换不反映
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>
回答by RoToRa
I would suggest simply not to use innerHTML on a
select- it just seems wrong.selectelements have easy to use methods to add new options:`document.getElementById('day').options.add(new Option("1", "1"))`
我建议不要在 a 上使用 innerHTML
select- 这似乎是错误的。select元素具有易于使用的方法来添加新选项：`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.
只是想添加到这个答案中，因为它可能会向阅读这篇文章的人澄清。
回答by Jonathan Czitkovics
You should not be using innerHTMLto modify tags. You should be using removeChild(element);and appendChild(element);
您不应该使用innerHTML来修改标签。你应该使用removeChild(element);和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 Gregtheitroade
{
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!
现在包括闰年！
回答by Tyler W. Cox
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.
这是一个小技巧，但它很小并且在 FF 和 IE 中都可以作为 IE 无法更改选择元素上的 innerHTML 的解决方法。
function swapInnerHTML(objID,newHTML) {
var el=document.getElementById(objID);
el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}
回答by John Adel
another solution is to use Jquery
另一个解决方案是使用 Jquery
$('#day').html('<option value="1">1</option><option value="2">2</option>');
$('#day').html('<option value="1">1</option><option value="2">2</option>');
回答by Gavin Palmer
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>';
}
回答by Luca
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.
Javascript innerHTML 不再适用于选定的 HTML 元素。
Description:
描述：
The standard Javascript syntax to dinamically assign HTML contents (document.getElementById().innerHTML=...) does not work any more on the selectHTML 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.
动态分配 HTML 内容的标准 Javascript 语法 ( document.getElementById().innerHTML=...) 不再适用于选定的HTML 元素，因为操作系统或最常用的浏览器的（可能是所有）版本未知；在 select 元素上使用它会导致浏览器崩溃。
Solution:
解决方案：
To dinamically assign HTML contents to an HTML selectelement, instead of using the standard syntax:
要动态地将 HTML 内容分配给 HTML select元素，而不是使用标准语法：
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>
)
;
回答by access_granted
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>
