使用数组中的值填充下拉列表框答案

【问题标题】：Populate Drop Down List Box with values from array使用数组中的值填充下拉列表框
【发布时间】：2013-08-17 03:37:16
【问题描述】：

我需要在我的表单中填充人类种族的下拉列表框。我相信我做对了，但我收到一条错误消息 Error: Unable to get property 'appendChild' of undefined or null reference

我做错了什么？

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" />&nbsp;&nbsp;&nbsp; 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">&nbsp;</td>
                <td class="style2">&nbsp;</td>
                <td class="style4">
                    <input type="button" id="myButt" value="Submit Entry" onclick="return      myButt_onclick()" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </center>
</body>
</html>

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：

#subHeader
{
    text-align: right;   
}

【问题讨论】：

似乎工作得很好，伙计（fiddle）。什么时候调用脚本？顺便说一句，i<options.length 就足够了，因为数组 Index 从 0 开始。
我在 HTML 正文中调用脚本。
是在元素RaceDropDown的代码之后还是之前？
我在它之前调用它。
脚本应该在元素创建后调用，否则在执行时找不到元素。你能把这个脚本移到</body>标签之前吗？

标签： javascript html arrays list drop-down-menu

【解决方案1】：

改变这个：

for (i = 0; i <= options.length; i++)

到

for (i = 0; i < options.length; i++)

只需要< 。不是<=

【讨论】：

【解决方案2】：

正如我在 cmets 中提到的，脚本应该在元素创建后调用。如果没有，脚本会抛出错误，因为它找不到要添加 options 的 select 元素。

请创建一个用于填充下拉列表的函数并将其命名为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;

顺便说一句，在 for 循环中 i < options.length 就足够了，而不是 i <= options.length。

【讨论】：