表单元素-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 ...
随机推荐
- (转)单例模式(Singleton)
首先来明确一个问题,那就是在某些情况下,有些对象,我们只需要一个就可以了, 比如,一台计算机上可以连好几个打印机,但是这个计算机上的打印程序只能有一个, 这里就可以通过单例模式来避免两个打印作业同时输 ...
- iOS_SN_Socket - AsyncSocket
转载文章,原地址:http://yimouleng.com/2015/02/04/Socket-AsyncSocket/ 一.前言 公司的项目用到了Socket编程,之前在学习的过程当中,用到的更多的 ...
- IOS 错误集合以及解决办法(持续整理中)
1 . 如下错误: app:resource fork, Finder information, or similar detritus not al site:forums.developer.ap ...
- Sql 函数大全 (更新中...由难到简
1.字符处理类: 1.1 指定指定字符输出的次数 ) 结果:1a1a1a1a1a (5个1a)
- js 计算某年某周日期范围
<HTML><HEAD><script type="text/javascript"> //目前只判断了4位有效输入的年份,//日期输出格式已处 ...
- IT编程培训,线上线下,孰优孰劣
现在Java培训机构确实参差不齐,主要有在线培训和线下培训两大类: 1,虚拟和现实的区别:不论视觉,听觉,体验上在线教学都不如线下教学. 2,学费问 题:在线教学由于成本低,不受地域,教学设备限制一般 ...
- 求实现sql?
id name pid1 曾祖父 02 祖父 13 父亲 24 儿子 35 孙子 4备注:用一条数据库语句来解决查询结果:name1 name2 name3曾祖父 祖父 父亲曾祖父 父亲 儿子曾祖父 ...
- 搬寝室(HDU 1421 DP)
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- 栈应用之中缀表达式计算 MFC实现(计算器核心)
大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 支持小数.阶乘.乘方.加减乘除.括号优先级运算,美化输出结果(显示结果末尾没有多余的0) void ...
- AFNetworking 使用方法(2.0)
AFNetworking 使用方法(2.0) 分类: IOS2014-11-12 09:17 2018人阅读 评论(0) 收藏 举报 目录(?)[+] 本文介绍的是AFNetworking-2 ...