使用數組中的值填充下拉列表框

Question

我需要在表單中的下拉列表框中填寫人類。 我相信我已正確完成此操作，但收到一條錯誤消息： 錯誤：無法獲取未定義或空引用的屬性“ appendChild”

我究竟做錯了什么？

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;   
}

Answer 1

更改此：

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

至

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

只需要做< 。 不是<=

Answer 2

如我的評論中所述，腳本應在元素創建后調用。 否則，腳本將引發錯誤，因為它將找不到select元素來添加options 。

請創建一個用於填充下拉菜單的函數，然后按如下所示對其進行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;

i < options.length ，在for循環中， i < options.length足以代替i <= options.length 。

使用數組中的值填充下拉列表框

問題描述

2 個解決方案

解決方案1
3 已采納 2013-08-17 03:42:12

解決方案2
1 2013-08-17 04:28:13

使用數組中的值填充下拉列表框

問題描述

2 個解決方案

解決方案1 3 已采納 2013-08-17 03:42:12

解決方案2 1 2013-08-17 04:28:13

解決方案1
3 已采納 2013-08-17 03:42:12

解決方案2
1 2013-08-17 04:28:13