Question

我不确定我做错了什么。我试图在我的下拉框中显示第一列，但我一直在生成错误。谁能看到我做错了什么？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script type="text/javascript">
var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for(var i=0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.option[select.option.length] = option;  
}
</script>
<body>
<select id="complaintType">
</select>
</body>
</html>

Answer 1

请尝试使用此格式。问题是您在元素存在之前调用脚本。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<select id="complaintType">
</select>

<script type="text/javascript">
var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for(var i=0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.option[select.option.length] = option;  
}
</script>
</body>
</html>

或者，如果你想让你的脚本保持在顶部，如果你使用的是jQuery，你可以在里面插入脚本：

$(document).ready(function(){ //insert script here });

确保在您定位的元素存在于DOM中之前不会触发。

如果您不想使用jQuery，您可以执行类似的操作（但在IE8或更低版本中不起作用）：

document.addEventListener("DOMContentLoaded", function(event) { //insert script here });

Answer 2

你有两个问题。首先，您正在执行的代码在您定位的元素存在之前运行。其次，使用appendChild（）将选项添加到您的选择：

var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for (var i = 0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.appendChild(option);
}

<强> jsFiddle example

我一直收到错误Uncaught TypeError：无法读取属性＆＃39;选项＆＃39;为null

2 个答案: