选项选择javascript表单之 —— 选择框操作方法详解
来源:互联网 发布:云校app软件下载 编辑:程序博客网 时间:2024/05/16 10:12
首先声明,我是一个菜鸟。一下文章中出现技术误导情况盖不负责
表单元素的选择框有单选和多选之分,都是通过<select>和<option>元素来创立,多选选择框只须添加multiple特性:multiple="multiple",建议不要缩写,为更好地兼容xhtml。
选择框既然是表单元素之一,当然会继承表单字段的共有的属性和方法,例如:disable、form、name、readOnly、tabIndex、type、value、focus()、blur();另外还有共有的表单事件:例如:blur、change、focus。这些共有的属性和方法都具有明显的语义性,所以在这里就不加详解了,着实想不起可以google。
选择框继承于HTMLSelectElement类型,那么此类型又有哪些属性和方法呢?
add(newOption, relOption):向控件中增加新的option元素,指定位置在relOption元素之前。
multiple:布尔型,表示是不是允许多行,相当于HTML中的multiple特性。
options:控件中全部的option元素的HTMLCollection。可用[index]和["id"]拜访,也可以使用.item(index)和.item("id")拜访,还能用.namedItem("id or name")。注:HTMLCollection都可以使用这五种方法拜访,Nodelist则只能使用index两种方法拜访。
remove(index):移除指定位置的选项。
selectedIndex:选中项的索引值,若没有选中项,则值为-1。对于多选框,只保存选中项的第一个索引值。
size:选择框表现可见的行数,多选框最小值为4,设定小于4的值将被疏忽。
在DOM中,每一个option元素都是一个HTMLOptionElement对象表示,此对象有下列属性:
index、label、selected(表示当前选项是不是被选中)、text、value。建议最好使用这些属性拜访其值,而不是使用效率相对较低的DOM方法去拜访。拜访单选框最快捷的方法是,使用属性selectedIndex,例如:
var selectedOption = selectBox.options(selectBox.selectedIndex);
function getSelectedOptions(selectBox){ var result = [], option = null; for(var i=0, len=selectBox.options.length; i<len; ++i){ option = selectBox.options[i]; !option.selected || result.push(option); } return result;}
后面已经讲了如何寻觅选中项,上面就来看看怎样动态添加选项。重要分为两种方法:
第一种是DOM方法,先看代码:
var option = document.createElement("option");option.appendChild(document.createTextNode("option text"));option.setAttribute("value", "option value"); //value属性可以不添加selectBox.appendChild(option);
var option = new Option("option text", "option value");selectBox.add(option, undefined); //第二个参数为新增选项后面选项的索引
有增加天然有删除,移除选项的方法跟增加选项方法基本上是对应的。首先,使用DOM的removeChild()方法,传入要移除的选项,如下所示:
selectBox.removeChild(selectBox.options[index]); //index为要移除选项的索引
selectBox.remove(index);
selectBox.options[index] = null;
function clearSelectBox(selectBox){ for(var i=0,len=selectBox.options.length;i<len;++i){ selectBox.remove(0); }}
如果给appendChild()方法传入一个文档中已经存在的元素,那么此方法就会先将其从父元素中移走,并添加到指定的位置(第二个选择框中)。
selectBox1.appendChild(selectBox2.option[0]); //选择框2的第一个元素移到选择框1末端
function forwardStep(option){ //option为选择框中已经存在的元素,否则成了插入选项 var selectBox = option.parentElement; option.index ? selectBox.insertBefore(option, selectBox.options[option.index - 1]) : alert(“The option is the first already”);}
文章结束给大家分享下程序员的一些笑话语录: 爱情观
爱情就是死循环,一旦执行就陷进去了。
爱上一个人,就是内存泄露--你永远释放不了。
真正爱上一个人的时候,那就是常量限定,永远不会改变。
女朋友就是私有变量,只有我这个类才能调用。
情人就是指针用的时候一定要注意,要不然就带来巨大的灾难。
- 选项选择javascript表单之 —— 选择框操作方法详解
- JavaScript 选择框 选项移动
- JavaScript之选择框脚本(表单脚本)
- 说说 JavaScript 表单的选择框脚本
- 表单特效-点击左侧选项选入右侧选择框
- form表单字段元素对象(四)— —为列表框增加若干选择项,并自动选择其中某一选项
- JavaScript权威指南_145_第15章_脚本化文档_15.9-HTML表单-选择框和选项元素
- JavaScript之checkbox选择
- gridview 中的选项javascript选择方法
- 表单增强与验证——选择框(联动选择框)
- 后台选择下拉框选项
- EasyUI 之 下拉框默认选择第一个选项
- javascript学习之选择结构(2)—— switch
- 选择同步操作方法或异步操作方法
- 表单文件选择框样式
- 表单复选框选择删除
- 表单(三)选择框
- ArcGIS字段选择的操作方法
- Linux进程间通信(2):信号
- Java移位运算符
- 通过Linux理解操作系统(一):概述
- Spring系列之一——开源框架Spring环境搭建
- Spring2.5基于注解和XML配置事务管理
- 选项选择javascript表单之 —— 选择框操作方法详解
- Rhythmbox中文乱码解决
- 使用tomcat日志对访问ip进行排序
- Linux进程间通信(1):管道
- 常用的Linux命令行文本处理工具总结
- linux爱好者之中级篇--进程管理
- E: 无法获得锁 /var/lib/dpkg/lock
- 冒泡排序(倒序)C++
- Centos6.3下搭建sendmail/dovecot邮局服务器