使用Javascript向HTML选择框添加选项时出错

这是我的错误

Uncaught TypeError: Cannot read property 'options' of null

和我的javascript函数：

<script language="JavaScript" type="text/javascript">
     function appendlistbox(){
          var select = document.getElementById("listboxstock");
          select.options[select.options.length] = new Option("myobject", "index");
     }
</script>

函数appendlistbox（）{
var select=document.getElementById（“listboxstock”）；
select.options[select.options.length]=新选项（“myobject”、“index”）；
}

这是我的HTML：

<button type="button" id="btnaddstock" class="btn btn-default" onclick="appendlistbox()">Tambahkan Bahan</button>

<label>Bahan Yang Dibutuhkan :</label>
<select name="listboxstock" size="5" class="form-control">
</select>

Tambahkan Bahan
他说：

---

我不知道这个错误

您应该使用

document.getElementsByName

方法访问

按名称属性选择

document.getElementsByName
返回一个
NodeList
，因此您必须使用其索引访问您的select:
var select=document.getElementsByName（“listboxstock”）[0]

最终解决方案


函数appendlistbox（）{
var select=document.getElementsByName（“listboxstock”）[0]；
select.options[select.options.length]=新选项（“myobject”、“index”）；
}
Tambahkan Bahan
他说：
您的问题在这一行：

var select = document.getElementById("listboxstock");

select没有id“listboxstock”（即“name”属性，而不是id）。因此，您可以将其更改为：

<select name="listboxstock" id="listboxstock" size="5" class="form-control">

您的select标记需要属性
id

select name="listboxstock" id="listboxstock" size="5" class="form-control">

您正在将“name”属性
listboxstock
分配给select控件，但没有分配“id”属性。由于您使用的是
document.getElementById
，因此找不到您的元素（因此
未捕获类型错误：无法读取null的属性“options”
错误。请分配id，或使用
getElementsByName
：

姓名：

<script language="JavaScript" type="text/javascript">
     function appendlistbox(){
          var select = document.getElementsByName("listboxstock")[0];
          select.options[select.options.length] = new Option("myobject", "index");
     }
</script>

<button type="button" id="btnaddstock" class="btn btn-default" onclick="appendlistbox()">Tambahkan Bahan</button>

<label>Bahan Yang Dibutuhkan :</label>
<select name="listboxstock" size="5" class="form-control">
</select>


函数appendlistbox（）{
var select=document.getElementsByName（“listboxstock”）[0]；
select.options[select.options.length]=新选项（“myobject”、“index”）；
}
塔姆巴坎巴哈恩酒店
他说：

按Id:

<script language="JavaScript" type="text/javascript">
     function appendlistbox(){
          var select = document.getElementById("listboxstock");
          select.options[select.options.length] = new Option("myobject", "index");
     }
</script>

<button type="button" id="btnaddstock" class="btn btn-default" onclick="appendlistbox()">Tambahkan Bahan</button>

<label>Bahan Yang Dibutuhkan :</label>
<select id="listboxstock" name="listboxstock" size="5" class="form-control">
</select>


函数appendlistbox（）{
var select=document.getElementById（“listboxstock”）；
select.options[select.options.length]=新选项（“myobject”、“index”）；
}
塔姆巴坎巴哈恩酒店
他说：

将上面的行替换为下面的行
名称
与
id
不同。没问题。祝您的项目好运。
<select name="listboxstock" size="5" class="form-control"></select>

replace above line with the following line 

<select id="listboxstock" size="5" class="form-control"></select>