016-删除列表框、下拉菜单的选项

最新推荐文章于 2021-10-08 09:49:26 发布

编码的三叔

最新推荐文章于 2021-10-08 09:49:26 发布

阅读量1.3k

点赞数

分类专栏： DOM详解 DOM详解文章标签： js删除HTML的列表框 js删除HTML下拉菜单的选项

本文链接：https://blog.csdn.net/ppwwp/article/details/88562460

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

删除列表框，下拉菜单的选项有两种方法：

利用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，即可一次性删除该列表框、下拉菜单的全部选项。

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
016-删除列表框、下拉菜单的选项

删除列表框，下拉菜单的选项有两种方法：利用HTMLSelectElement对象的remove()方法删除选项。直接将指定选项赋值为null即可。对HTMLSelectElement对象而言，它提供了如下方法用于删除选项。remove(long index)：删除指定索引处的选项。上面方法中的index是需要删除选项所在的索引值。如果该索引值比下拉列表中选项的最大索引值还大，或者...
复制链接

扫一扫