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

-1

我有一個需求來填充我的人類種族形式的下拉列表框。我相信我做得正確，但我得到一個錯誤，說錯誤：無法獲取屬性'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; 
}

來源

2013-08-17 mwilson

似乎工作得很好的隊友（[** fiddle **]（http://jsfiddle.net/hari_shanx/eH5bC/））。該腳本何時被調用？作爲一個方面，'i Harry

我正在調用HTML正文中的腳本。 – mwilson

它在元素「RaceDropDown」的代碼之後還是在它之前？ – Harry

更改此：

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

到

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

只是需要做<。不是<=

來源

2013-08-17 03:42:12 poodle

正如我的評論中提到的那樣，該腳本應該在元素創建後調用。如果沒有，該腳本會拋出一個錯誤，因爲它不會找到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;

順便說一句，在for循環i < options.length是足夠的，而不是i <= options.length。

來源

2013-08-17 04:28:13 Harry

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

回答

相關問題