码迷,mamicode.com
首页 > 其他好文 > 详细

表单元素-select

时间:2016-07-30 12:04:03      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

 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 元素的基本操作。

 

  •   HTMLSelectElement  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。

  

  •   HTMLOptionElement  option
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;

所以一般在操作选项时,最好使用特定于选项的属性,因为浏览器都支持这些属性。

 

  • change事件触发时机:在选项发送改变时触发,与前面表述的 input等表单元素不一样。

★★:select对象的 value值因浏览器而异,在IE8以及低版中,当未指定value属性时,其返回的值为空。但是IE9+ 、Safari、Firefox、Chrome、Opera则会返回与text特性相同的值

表单元素-select

标签:

原文地址:http://www.cnblogs.com/czhyuwj/p/5720502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!