标签:
1 (function(window,document,undefined){
2 window.OperSelect = function(selector,option){
3 var _select = document.querySelector(selector);
4 this.add = function(newoption,relOption){
5 _select.add(newoption,relOption);
6 },
7 this.remove = function(index){
8 _select.remove(index);
9 },
10 this.getSelected = function(){
11 return _select.value;
12 },
13 this.getValue = function(){
14 return _select.value;
15 }
16 };
17 })(window,document,undefined);
这只是对简单的select 元素的基本操作。
select又叫选择框,是通过 select 和 option元素创建的。为了方便与这个控件交互,除了所有表单字段共有属性外,
类型还提供了下列属性和方法。
add(newOption,relOption) | 向控件中添加选项 |
multiple | 布尔值,表示是否允许多选 |
options | 控件所有的option集合 HTMLCollection |
remove(index) | 移除给定位置的选项 |
selectedIndex | 选项的索引,如果没有选中择为-1,如果选择是多项式,则为保存第一项的索引 |
size | 选择框中可见的行数 |
value | 选择框选中的值 |
注意: 当没有选择任何一项时,获取value时返回空;
当选择了option时,并存在value属性,其值就是对应的 value
当选择了option时,并不存在HTML属性value时,则其值对应为 option的文本内容供。
<form>
<select multiple="true" size="2">
<option value="JMS HADEN">JMS HADEN</option>
<option value="US">US</option>
<option value="JMS">JMS</option>
<option value="HADEN">HADEN</option>
</select>
<button type="button">add</button>
<button type="button">remove</button>
<button type="button">getValue</button>
</form>
var selectbox = document.forms[0].elements[0];
var btn1 = document.forms[0].elements[1];
var btn2 = document.forms[0].elements[2];
var btn3 = document.forms[0].elements[3];
var operSelect = new OperSelect("select",null);
selectbox.addEventListener("change",function(){
console.log(this.value);
console.log(this.selectedIndex);
},false);
btn1.addEventListener("click",function(event){
var lastchild = selectbox.options.length;
var o = document.createElement("option");
var text = document.createTextNode("王景");
o.setAttribute("value","wj");
o.appendChild(text);
operSelect.add(o,selectbox.options[lastchild-1]);
},false)
btn2.addEventListener("click",function(event){
var lastchild = selectbox.options.length-1;
operSelect.remove(lastchild);
},false);
btn3.addEventListener("click",function(event){
alert(operSelect.getValue());
},false);
上面主要对其表述的几个属性的操作:add、remove 、value 、selectIndex。
index | 当前选项在Options集中的索引 |
label | 当前选项的标签 |
selected | 表述选项是否被选中,选中为true |
text | 选项的文本 |
value | 选择项的value值 |
其中大部分属性的目的,都是为了方便对选项数据的访问。虽然也可以使用常规的DOM功能来访问这些信息,但效率是比较低的,如下面的例子所示:
//不推荐
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;
所以一般在操作选项时,最好使用特定于选项的属性,因为浏览器都支持这些属性。
★★:select对象的 value值因浏览器而异,在IE8以及低版中,当未指定value属性时,其返回的值为空。但是IE9+ 、Safari、Firefox、Chrome、Opera则会返回与text特性相同的值
标签:
原文地址:http://www.cnblogs.com/czhyuwj/p/5720502.html