您的位置：首页 > Web前端 > JavaScript

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

2014-09-19 08:00 471 查看
对于下拉框的操作十分繁多，这几天项目需要就总结一下

一、动态构建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：删除选中的下拉框的值，可以通过一个事件方法来实现，我们可以随便选中一栏，然后点击按钮，然后那一栏就将被删除

<html>
<head>
<script type="text/javascript">
/*注：delete是JS关键字，所以开始我想用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" onclick="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" onclick="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" onclick="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的不平凡 ，请勿用于任何商业用途）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript function select html js
相关文章推荐
新的分享
章节导航