DOM为列表框、下拉菜单添加、删除选项

最新推荐文章于 2024-07-09 14:10:47 发布

lx__angel

最新推荐文章于 2024-07-09 14:10:47 发布

阅读量1.7k

点赞数

文章标签： dom javascript 下拉菜单增删选项列表框

本文链接：https://blog.csdn.net/lx__angel/article/details/78748863

版权

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

创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。

new Option( text ,value , defaultSelected ,selected)

该构造器有4个参数，说明如下；

提示并不需要都指明四个参数，指明一个或者两个都可以，假如一个的话知名的是text,两个的话就是text value。

<html>
	<head>
		<title>00</title>
		
	</head>
	<body id="test">
	
		<input type="button" value="创建一个城市列表框" οnclick="test()"/>
		<input type="button" value="一条条删除列表框的每一项" οnclick="testdelete()"/>
		<input type="button" value="一次性清空列表项" οnclick="testdeleteAll()"/>
	
	</body>
	
	<script type="text/javascript" charset="utf-8">
		
			function test(){
				var element=document.createElement("select");
				for(var i=0;i<10;i++){//注意，变量的定义只能用var
					var options=new Option("列表项"+i,i);
					element.options[i]=options;
				}
				element.id="myselect";
				element.size=5;
				document.getElementById("test").appendChild(element);
			}
			
			function testdelete(){
				var myselect=document.getElementById("myselect");
				var element=myselect.options;
				if(element.length>0){
					myselect.remove(element.length-1);
				}
			}
			
			function testdeleteAll(){
				var myselect=document.getElementById("myselect");
				if(myselect.options.length>0){
					myselect.options.length=0;
				}
			}
		
		</script>

</html>