013-为列表框、下拉菜单添加选项

最新推荐文章于 2022-02-16 20:43:51 发布

编码的三叔

最新推荐文章于 2022-02-16 20:43:51 发布

阅读量538

点赞数

分类专栏： DOM详解 DOM详解文章标签：列表框、下拉菜单添加选项 select添加选项

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

版权

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

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

为列表框、下拉菜单添加子节点，也就是为列表框、下拉菜单添加选项。添加选项有两种方法：

调用HTMLSelectElement的add()方法添加选项
直接为<select……>的指定选项复制
HTMLSelectElement包含如下方法用于添加新选项。
add(HTMLOptionElement option,HTMLOptionElement before):在before选项之前添加option选项。如果想将option选项添加在最后，则将before指定为null即可；或者依然使用之前介绍的appendChild(option)添加异可。

下面的diamante示范了通过这种方式来添加选项。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>创建节点</title>
			
		</head>
		<body id='test'>
			<script type="text/javascript">
				var a = document.createElement("select");
				for(var i=0;i<10;i++){
					var op = document.createElement("option");
					op.innerHTML = '新增选项'+i;
					a.add(op,null);
				}
					a.size = 5;
					document.getElementById("test").appendChild(a);
			</script>
		</body>
	</html>

在这里插入图片描述

上面的代码在IE8以前的代码会出现错误，主要是因为它不允许调用add()方法时指定最后一个参数为null。为了避免这种情况，可直接为指定选项复制的方法来添加选项。

为指定选项复制所支持的值必须是一个有效的选项，创建选项除了可使用前面所示的createElement()方法之外，还可以使用如下构造器。

new Option(text,value,defaultSelected,selected)

构造器有4个参数，这4个参数说明如下：

text:该选项的文本，即该选项所呈现的‘内容’
value:选中该选项值
defaultSelected:设置默认是否选中该选项
selected:设置该选项当前是否被选中

并不是每次构造该选项都需要指定4个参数，也可以至指定一个参数或者两个参数。如果构造Option对象只指定了一个参数，则该参数是option的text值；如果指定了两个参数，则第一个参数是text，第二个参数是value。

注意：在早期的IE浏览器（如IE8之前的浏览器）中运行时，如果直接为指定列表赋值，则赋值的<option……/>元素必须是通过new Option()方法得到的，而不能是通过document.createElement("option")得到的。

下面代码示范了利用第二种方式来为列表框、下拉菜单添加选项。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>创建节点</title>
			
		</head>
		<body id='test'>
			<script type="text/javascript">
				var a = document.createElement("select");
				a.style.width = "200px";
				for(var i=0;i<10;i++){
					var op = new Option("这是一首简单的小情歌"+i,i);
					a.options[i] = op;
				}
				a.size = 5;
				document.getElementById("test").appendChild(a);
			</script>
		</body>
	</html>

在这里插入图片描述
上面的代码可以再Firefox、Opera、Chrome、Safari、IE等各种主浏览器中运行良好。

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
013-为列表框、下拉菜单添加选项

为列表框、下拉菜单添加子节点，也就是为列表框、下拉菜单添加选项。添加选项有两种方法：调用HTMLSelectElement的add()方法添加选项直接为&lt;select……&gt;的指定选项复制HTMLSelectElement包含如下方法用于添加新选项。add(HTMLOptionElement option,HTMLOptionElement before):在before选项之...
复制链接

扫一扫