JavaScript学习笔记之下拉选择框的操作
对于下拉框的操作十分繁多，这几天项目须要就总结一下
一、动态构建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" 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>
持续总结中~~~
參考博客：
JavaScript学习笔记之下拉选择框的操作的更多相关文章
- javascript学习笔记（九）：DOM操作HTML的各种方法使用
<!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8" ...
- javascript学习笔记（四）：DOM操作HTML
当网页被加载时,浏览器会创建页面的文档对象模型Document Object Model,简称DOM Dom操作html 1:改变页面中所有HTML元素 2:改变页面中所有HTML属性 3:改变页面中 ...
- 一款javascript实现的超炫的下拉选择框
今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览 源码下载 实 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- CSS3不一样的下拉选择框
本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
随机推荐
- Ubuntu忘记管理员密码
Ubuntu中不小心把管理员密码忘记了,真叫人头大. 现提供一个解决方案: 1.重启 Ubuntu 系统,按 Esc 进入GRUB 菜单界面,如下图: 2.选择recovery mode. (第二个) ...
- poj 2513 Colored Sticks( 字典树哈希+ 欧拉回路 + 并查集)
题目:http://poj.org/problem?id=2513 参考博客:http://blog.csdn.net/lyy289065406/article/details/6647445 htt ...
- sencha touch2 动画问题
最近在review一个项目的代码, 发现返回操作比较乱,很多"从哪里来,到哪里去的操作"被写的一塌糊涂; 按照ios系统的进场出场动画(人家的体验还是很好的,必须借鉴)为标准,使用 ...
- Java 简单登录MVC
构建一个简单的基于MVC模式的JavaWeb 零晨三点半了,刚刚几个兄弟一起出去吼歌,才回来,这应该是我大学第二次去K歌,第一次是大一吧,之后每次兄弟喊我,我都不想去,因为我还是很害怕去KTV,或许是 ...
- 【转】Cocos2d-x 弹出对话框的设计与实现
转自:http://www.tairan.com/archives/4854 我们时常需要这么些功能,弹出一个层,给与用户一些提示,这也是一种模态窗口,在没有对当前对话框进行确认的时候,不能继续往下操 ...
- (二)学习MVC之实现用户注册功能
学习地址:http://www.cnblogs.com/mzwhj/archive/2012/10/22/2720089.html 本文和学习地址不一样的地方是我自己添加了一些简单的注释和理解. 1. ...
- 向Oracle数据库中插入数据出错：ORA-01036 无效的变量名或数据
向Oracle数据库中插入数据出错: 经过排查,因为Update数据时没有出错,所以OracleHelper没有问题: 看异常信息提示:无效的变量和数据,应该是SQL语句的问题,调试时所传的实例Use ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- Spring 教程（二）
一.Spring AOP介绍 开发其实就是在不断的重构,抽象重复代码,然后进行封装.从最原始的模块化编程到面向对象编程,代码的封装越来越整齐清晰,但是依然存在重复的代码,而这些重复代码几乎都是与业务逻 ...
- MySQL 存储过程删除大表
1.权限问题 alter routine 编辑或删除存储过程 create routine 建立存储过程 execute 创建存储过程 2.存储过程相关的一些命令 show procedure sta ...