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

最新推荐文章于 2022-02-27 09:38:16 发布

weixin_33796177

最新推荐文章于 2022-02-27 09:38:16 发布

阅读量124

点赞数

文章标签： javascript java json ViewUI

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

一、动态构建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</option>
			<option name="num">stuNumber</option>
			<option name="grade">stuGrade</option>
		</select>
	</body>
</html>

样例3：删除选中的下拉框的值，能够通过一个事件方法来实现，我们能够随便选中一栏，然后点击button，然后那一栏就将被删除

<html>
	<head>
		<script type="text/javascript">
			/*注：delete是JSkeyword，所以開始我想用delete定义方法名的，是不阔以的。*/
			function deleteOption(){
				var obj = document.getElementById("sort");
				for(var i=0;i<obj.options.length;i++){
					if(obj.options[i].selected == true){
						obj.options[i] = null;
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="sort">
			<option name="name">studentName</option>
			<option name="num">stuNumber</option>
			<option name="grade">stuGrade</option>
		</select>
		<input type="button" value="click" οnclick="deleteOption();">
	</body>
</html>

样例4：将下拉选择框中的值清空

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				document.all.sort.options.length = 0;
			}
		</script>
	</head>
	<body>
		<select id="sort">
			<option name="name">studentName</option>
			<option name="num">stuNumber</option>
			<option name="grade">stuGrade</option>
		</select>
	</body>
</html>

样例5：想得到option里面name的值，我们通过一个button事件，点击，弹出对话框，里面的信息就是name的值

<html>
	<head>
		<script type="text/javascript">
			//获取一个下拉选择框的options值
			function show(){
				var obj = document.getElementById("slt");
				for(var i=0;i<obj.options.length;i++){
					if(obj.options[i].selected == true){
						alert(obj.value);
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="slt">
			<option value="0">username</option>>
			<option value="1">password</option>>
		</select>
		<input type="button" name="click" value="click" οnclick="show();">
	</body>
</html>

关键思路还是先得到select下拉选择框这个对象，遍历选中的option，对象.value就能够表达出来。
那我们要是一開始默认就想载入一个特定的option，那我们能够特定定义一个window.onload事件，指定要载入的option的值

<html>
	<head>
		<script type="text/javascript">
				window.onload = function(){
					//默认的情况下options显示的是userage这一选择框的信息
					document.getElementById("slt").value = 1;
				}
		</script>
	</head>
	<body>
		<select id="slt">
			<option value="0">username</option>>
			<option value="1">userage</option>>
		</select>
	</body>
</html>

样例6：输出option的下标值，从0開始

<html>
	<head>
		<script type="text/javascript">
			function show(){
				var obj = document.getElementById("sort");
				/*输出option的下标值，从0開始*/
				alert(obj.selectedIndex);
			}
		</script>
	</head>
	<body>
		<select id="sort">
			<option name="name">studentname</option>
			<option name="stunum">studentnumber</option>
		</select>
		<input type="button" value="click" οnclick="show();">
	</body>
</html>

二、select的回显（与jsp结合）

通常我们运行更新用户信息的时候，须要回显下拉选择框的信息，这时候假设用JSP开发的话，能够利用JSTL标签的<c:if>

首先引入JSTL标签库：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<select id="sort" value="${sort}">
			<option name="name" <c:if test="${'name' eq sort}">selected</c:if>>studentname</option>
			<option name="stunum" <c:if test="${'stunum' eq sort}">selected</c:if>>studentnumber</option>
</select>

持续总结中~~~

參考博客：

http://www.cnblogs.com/Herist/archive/2007/09/24/903890.html

http://www.jb51.net/article/44657.htm
（转载本站文章请注明作者和出处 Coder的不平庸 ，请勿用于不论什么商业用途）