表单元素-select

 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元素创建的。为了方便与这个控件交互，除了所有表单字段共有属性外，

　　　　 类型还提供了下列属性和方法。

注意：　　当没有选择任何一项时，获取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

其中大部分属性的目的，都是为了方便对选项数据的访问。虽然也可以使用常规的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特性相同的值