JavaScript学习笔记之下拉选择框的操作

最新推荐文章于 2023-07-09 09:38:20 发布

VIP文章寻找现实扭曲力场

最新推荐文章于 2023-07-09 09:38:20 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： javascript function select html js

本文链接：https://blog.csdn.net/pearyangyang/article/details/39351689

版权

对于下拉框的操作十分繁多，这几天项目需要就总结一下

一、动态构建option

有时候我们需要动态构建下拉选择框里面的值，这里我们就要用到 var varItem = new Option("文本","值");构建一个或多个<option value="值">文本</option>

var varItem = new Option("studentName","name");

例子1：窗体在加载完毕后，就自动构造一个option

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				var obj = document.getElementById("sort");
				var varItem = new Option("studentName","name");
				obj.options.add(varItem);
			}
		</script>
	</head>
	<body>
		<select id="sort">
		</select>
	</body>
</html>

当然我觉得应该可以一下子构建多个options,可能是声明一个数组或者一个Json对象添加进去，但是具体怎么一下子增加多个option，会的朋友望指点

例子2：利用JS删除一栏为stuNumber的下拉选择框，以后如果做成动态的话就可以通过传参调用方法来删除指定栏的信息了。

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				var obj = document.getElementById("sort");
				for(var i=0;i<obj.options.length;i++){
					/*
						删除stuNumber那一栏里面
					*/
					if(obj.options[i].value == "stuNumber"){
						obj.options.remove(i);
						break;
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="sort">
			<option name="name">studentName<