删除列表框,下拉菜单的选项有两种方法:
- 利用HTMLSelectElement对象的remove()方法删除选项。
- 直接将指定选项赋值为null即可。
对HTMLSelectElement对象而言,它提供了如下方法用于删除选项。
- remove(long index):删除指定索引处的选项。
上面方法中的index是需要删除选项所在的索引值。如果该索引值比下拉列表中选项的最大索引值还大,或者索引值小于0,则该方法不会删除任何选项。下面的页面演示了动态增加下拉列表的选项,并可以删除下拉列表的选项。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<title></title>
</head>
<body id='test'>
<input type="text" name="" id="opValue" value="" />
<input type="button" name="add" id="add" value="增加" onclick="add()" />
<input type="button" name="del" id="del" value="删除" onclick="del()" />
<br/>
<select id="show" size="8" style="width: 180px;">
</select>
<script type="text/javascript">
var show = document.getElementById("show");
//增加下拉列表选项的函数
var add = function(){
//以文本框的值创建一个<option……/>元素
var op = new Option(document.getElementById('opValue').value);
show.options[show.options.length] = op;
}
var del = function(){
//如果有选项
if(show.options.length >0){
show.remove(show.options.length -1);
}
}
</script>
</body>
</html>
文本中输入一个值,单击增加按钮就可将其添加到下拉列表中;如果单击删除按钮,则将删除最新的一个选项。
show.remove(show.options.length -1);
可以换成
show.options[show.options.leng0-1] = null;
**注意:**如果想删除某个列表框、下拉菜单的全部选项,没有必要采用循环的方式逐一删除每个选项,将列表框或下拉菜单的innerHTML属性赋为null,即可一次性删除该列表框、下拉菜单的全部选项。