javascript 使用数组中的值填充下拉列表框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18284869/
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
Populate Drop Down List Box with values from array
提问by mwilson
I have a requirement to populate a drop down list box in my form with human races. I believe I've done it correctly but I get an error that says Error: Unable to get property 'appendChild' of undefined or null reference
我需要在我的表单中用人类填充下拉列表框。我相信我已经做对了，但我收到一个错误消息：错误：无法获取未定义或空引用的属性“appendChild”
What am I doing wrong?
我究竟做错了什么？
HTML:
HTML：
<!DOCTYPE html />
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="TheCSS.css" />
<style type="text/css">
.style1 {
height: 26px;
}
</style>
</head>
<body>
<script type="text/javascript" src="C:\Users\Marc\Desktop\JavaScript Projects\TheJavaScript.js"></script>
<center>
<table class="style1">
<tr>
<td colspan="4">
<center>
<h1><b>New Hire Form</b></h1>
</center>
</td>
</tr>
<tr>
<td id="subHeader" colspan="4"></td>
</tr>
<tr>
<td class="style3">First Name</td>
<td class="style2">
<input type="text" id="FirstName" onchange="return LastName_onchange()" />
</td>
<td class="style4">Last Name</td>
<td>
<input id="LastName" type="text" onchange="return FirstName_onchange()" />
</td>
</tr>
<tr>
<td class="style1">Sex</td>
<td class="style1">Male
<input id="Radio1" checked="true" name="R1" type="radio" value="M" /> Female
<input id="Radio1" checked="true" name="R1" type="radio" value="F" />
</td>
<td class="style1">Race</td>
<td class="style1">
<select id="RaceDropDown" name="D1"></select>
</td>
</tr>
<tr>
<td class="style3"> </td>
<td class="style2"> </td>
<td class="style4">
<input type="button" id="myButt" value="Submit Entry" onclick="return myButt_onclick()" />
</td>
<td> </td>
</tr>
</table>
</center>
</body>
</html>
JavaScript:
JavaScript：
var select = document.getElementById('RaceDropDown');
var options = ["Asian", "Black"];
var i;
for (i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
function LastName_onchange() {
var LastName = document.getElementById('LastName').value;
var FirstName = document.getElementById('FirstName').value;
document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}
function FirstName_onchange() {
var LastName = document.getElementById('LastName').value;
var FirstName = document.getElementById('FirstName').value;
document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}
CSS:
CSS：
#subHeader
{
text-align: right;
}
回答by poodle
Change this:
改变这个：
for (i = 0; i <= options.length; i++)
to
到
for (i = 0; i < options.length; i++)
Just need to do <. not <=
只需要做<。不是<=
回答by Harry
As mentioned in my comments, the script should be called after the element is created. If not, the script would throw an error because it will not find the selectelement to add options.
正如我在评论中提到的，应该在创建元素后调用脚本。如果没有，脚本将抛出错误，因为它找不到select要添加的元素options。
Please create a function for populating the drop-down and call it onloadlike the below:
请创建一个用于填充下拉列表的函数，并onload像下面这样调用它：
function popDropDown() {
var select = document.getElementById('RaceDropDown');
var options = ["Asian", "Black", "White"];
var i;
for (i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
window.onload = popDropDown;
As an aside, in the for loop i < options.lengthis enough instead of i <= options.length.
顺便说一句，在 for 循环i < options.length中代替i <= options.length.
