表单元素-select
<form>
<select size="2">
<option value="JMS HADEN">JMS HADEN</option>
<option value="US">US</option>
<option value="JMS">JMS</option>
<option value="HADEN" selected>HADEN</option>
</select>
<div id="selectedOption"> </div>
<button type="button">add</button>
<button type="button">remove</button>
<button type="button">getValue</button>
<button type="button">getOptions</button>
<button type="button">selectedAnyItem</button>
</form>
- HTMLSelectElement select
select又叫选择框,是通过 select 和 option元素创建的。为了方便与这个控件交互,除了所有表单字段共有属性外,
类型还提供了下列属性和方法。
add(newOption,relOption) | 向控件中添加选项 |
multiple | 布尔值,表示是否允许多选 |
options | 控件所有的option集合 HTMLCollection |
remove(index) | 移除给定位置的选项 |
selectedIndex | 选项的索引,如果没有选中择为-1,如果选择是多项式,则为保存第一项的索引 |
size | 选择框中可见的行数 |
value | 选择框选中的值 |
type | "select-one" | "select-multiple 取决于是否有 multiple |
注意:当没有选择任何一项时,获取value时返回空; 当选择了option时,并存在value属性,其值就是对应的 value; 当选择了option时,并不存在HTML属性value时,则其值对应为 option的文本内容供。
- HTMLOptionElement option
index | 当前选项在Options集中的索引 |
label | 当前选项的标签 |
selected | 表述选项是否被选中,选中为true |
text | 选项的文本 |
value | 选择项的value值 |
其中大部分属性的目的,都是为了方便对选项数据的访问。虽然也可以使用常规的DOM功能来访问这些信息,但效率是比较低的,如下面的例子所示:
var selectbox= document.forms[0].elements[0];
//不推荐
var text = selectbox.options[0].firstChild.nodeValue;
var value = selectbox.options[0].getAttribute("value"); //推荐 var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
所以一般在操作选项时,最好使用特定于选项的属性,因为浏览器都支持这些属性。
- change事件触发时机:在选项发送改变时触发,与前面表述的 input等表单元素不一样。
★★:select对象的 value值因浏览器而异,在IE8以及低版中,当未指定value属性时,其返回的值为空。但是IE9+ 、Safari、Firefox、Chrome、Opera则会返回与text特性相同的值
- 选择选项
两种情况,一种是单选、另一种是多选
当为单选选时,可以通过使用选择框的selectedIndex属性获取对应的选项
var selectedOption = selectbox.options[selectbox.selectedIndex];
对于多选来说,selectedIndex 代表是选择项中的第一个索引值,所以这种方式行不通,那我们可以使用前面列出的 option对象的属性 selected
selected 既然是表述当前选项是否被选中,那我们是否可以通过selected属性来动态选中某个选项尼?
selectbox.options[selectbox.options.length-1].selected = true;
上面是 通过 options 属性找到选择框中所有的项,并选中最后一个项。
注意:多选的时候,当选择框中已存在某个选项被选择时,通过动态选择框中其它项时,并不会取消移除已被选择的其它项。
单选 则会 移除;
既然可以通过 selected设置选中某个选项,那我们选中时,selected 代表的值是什么尼? 假设最后一项被选中
selectbox.options[selectbox.options.length-1].selected // true
通过上面我们就可以根据不同模式下,来获取当前被选择的项:
(function(window,document,undefined){
window.OperSelect = function(selector,option){
var _select = document.querySelector(selector);
//当对于单选时或者多选时只选择了一项时,可以通过 selectedIndex 属性来获取选项
this.getSingle = function(){
return _select.options[_select.selectedIndex];
};
//当对于多项时,可以通过 option选项的 selected 属性来作为是否选中的基准
this.getSelectedOption = function(){
var result = new Array();
var options = _select.options;
var len = 0;
for(var i=0;len = options.length,i<len;i++){
var option = options[i];
if(option.selected) {
result.push(option);
}
}
return result;
};
this.getOption = function(){
if(_select.multiple)
return this.getSelectedOption();
else
return this.getSingle();
}
};
})(window,document,undefined);
上面是写一个公共的构造方法,方便对 select进行操作。
- 添加选项
添加选项的方式有下几种:
- JavaScript DOM方式进行添加
var o = document.createElement("option");
var text = document.createTextNode("王景");
o.setAttribute("value","wj");
o.appendChild(text);
selectbox.appendChild(o); - Option 构造函数方式进行添加
var o = new Option("wj","王景");
selectbox.appendChild(o);option 构造函数接收两个参数,第一个是value值,第二个是text值;通过这种方式也可以添加方式;在IE中却存在bug,IE8以及低版本中,text值无法设置进去。
- 选择框的add()方法
- JavaScript DOM方式进行添加
DOM规定 add()方法接收两个参数,一个当前需要插入的 和 将位于新选项之后的选项 。 如果想在最后一项添加一项得把第二个参数设置为空。
而IE中对DOM方法 add 方法第二个参数是可选的,第二个参数为新元素插入之后的索引。 如果要兼容跨浏览器,那么就不可能只传递一个参数,那么必须添加两个参数,其中第二个参数可以设置为 undefind,则可在选择框最后添加一项。
var o = new Option("wj","王景");
selectbox.add(o);
如果想兼容IE和其它浏览器,必须通过DOM技术和insertBefore()方法。
var o = document.createElement("option");
var text = document.createTextNode("王景");
o.setAttribute("value","wj");
o.appendChild(text);
selectbox.appendChild(o);
selectbox.insertBefore(o,selectbox.options[1]);
- 移除选项
DOM方法 removeChild
selectbox.removeChild(selectbox.options[1]);
选择框提供方法 remove
selectbox.remove(0);
通过把对应 option设置为null
selectbox.options[0] = null;
- 移动和重排序
在DOM标准之前我们移动元素需要通过先判断当前添加的元素是否存在,存在则不添加。 而利用DOM方法 appendChild可以添加把一个选择框中元素移动到另外一个选择框中。如果当前选择框中存在对应元素会先移除再追加到指定位置。
selectbox.appendChild(selectbox1.options[1]);
则可以利用 insertBefore 进行重排序。
var removeOption = selectbox.options[1];
selectbox.insertBefore(removeOption,selectbox.options[removeOption+2]);
每次移除或者移动都会重置index。
表单元素-select的更多相关文章
- html5表单元素详解
表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
- select表单元素详解及下拉列表模拟实现
原文地址:→看过来 写在前面 select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多 ...
- jquery attr处理checkbox / select 等表单元素时的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- jquery attr处理checkbox / select 等表单元素时只能使用一次的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
随机推荐
- 九个Console命令,让 JS 调试更简单
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...
- 使用游标循环进行SQL更新插入的SQL语句
使用SQL中的循环,可以实现许多我们需要的操作,比如SQL更新操作.下面就为您介绍使用游标循环进行SQL更新插入的SQL语句写法,希望对您深入学习SQL更新有所帮助. --开始事务 BEGIN TRA ...
- OD调试4--去除NAG窗口
OD调试4--去除NAG窗口 nag本意是烦人的意思,nag窗口是软件设计者用来时不时提醒用户购买正版的警告窗口.软件设计者可能认为当用户忍受不了试用版中的这些烦人的窗口时,就会考虑购买正式版本. 一 ...
- js实现楼层效果
今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html><html lang="en"><head& ...
- 树状dp ural1018
#include<stdio.h> #include<string.h> #include <iostream> using namespace std; ; in ...
- Windows下Mysql解压缩版配置安装与卸载
安装: ①解压Mysql到合适的位置! ②以管理员身份运行命令提示符(cmd),cd C:\Documents and Settings\Administrator\桌面\mysql-5.6.24-w ...
- C语言实现的OOP
我倒不是为了OOP而OOP,实在是OOP的一些特征,例如封装,多态其实是软件工程思想,这些思想不分语言,遵循了这些思想可以使得程序更有弹性,更易修改和维护,避免僵化,脆弱 shape.h 该文件定义的 ...
- MathJax测试
\begin{array}{cc} a & b \\ c & d \end{array} \begin{equation} \int_0^\infty \frac{x^3}{e^x-1 ...
- 数据库语句union的总结
select * from ( (select * from user limit 0,3) union (select * from user limit 10,30) ) tmp where ui ...
- yii CMenu的配置(导航栏)
给主键的li 和a标签添加元素$this->myMenu = array( 'id'=>'myMenu', 'items'=>array( array( 'label'=>'H ...