选项选择javascript表单之 —— 选择框操作方法详解

首先声明，我是一个菜鸟。一下文章中出现技术误导情况盖不负责

    表单元素的选择框有单选和多选之分，都是通过<select>和<option>元素来创立，多选选择框只须添加multiple特性：multiple="multiple"，建议不要缩写，为更好地兼容xhtml。

    选择框既然是表单元素之一，当然会继承表单字段的共有的属性和方法，例如：disable、form、name、readOnly、tabIndex、type、value、focus()、blur()；另外还有共有的表单事件：例如：blur、change、focus。这些共有的属性和方法都具有明显的语义性，所以在这里就不加详解了，着实想不起可以google。

    选择框继承于HTMLSelectElement类型，那么此类型又有哪些属性和方法呢？

    add(newOption, relOption):向控件中增加新的option元素，指定位置在relOption元素之前。

    multiple:布尔型，表示是不是允许多行，相当于HTML中的multiple特性。

    options：控件中全部的option元素的HTMLCollection。可用[index]和["id"]拜访，也可以使用.item(index)和.item("id")拜访，还能用.namedItem("id or name")。注：HTMLCollection都可以使用这五种方法拜访，Nodelist则只能使用index两种方法拜访。

    remove(index):移除指定位置的选项。

    selectedIndex:选中项的索引值，若没有选中项，则值为-1。对于多选框，只保存选中项的第一个索引值。

    size:选择框表现可见的行数，多选框最小值为4，设定小于4的值将被疏忽。

    在DOM中，每一个option元素都是一个HTMLOptionElement对象表示，此对象有下列属性：

    index、label、selected(表示当前选项是不是被选中)、text、value。建议最好使用这些属性拜访其值，而不是使用效率相对较低的DOM方法去拜访。拜访单选框最快捷的方法是，使用属性selectedIndex，例如：

var selectedOption = selectBox.options(selectBox.selectedIndex);

设定选中项也是如此。另外使用selected属性也可以达到目标，因为须要进行循环效率偏低，单选框时不推荐使用。上面例子是循环遍历多选框的选中项集合：

function getSelectedOptions(selectBox){
    var result = [],
          option = null;
    for(var i=0, len=selectBox.options.length; i<len; ++i){
        option = selectBox.options[i];
        !option.selected || result.push(option);
     }
    return result;
}

这个函数可以返回给定多选框选中项的数组，中间的过程很简略，就是对多选框的各选项进行循环判断，判断的条件就是选项的selected属性，若为true则将选项推入数组中。

    后面已经讲了如何寻觅选中项，上面就来看看怎样动态添加选项。重要分为两种方法：

    第一种是DOM方法，先看代码：

var option = document.createElement("option");
option.appendChild(document.createTextNode("option text"));
option.setAttribute("value", "option value");   //value属性可以不添加
selectBox.appendChild(option);

    每日一道理
如果人类不好好保护我们这个赖以生存的地球，终有一天，风沙的肆虐与垃圾的堆积会吞没我们美丽的家园。我向全世界的人们呼吁：让我们从现在开始，从我做起，手挽手，肩并肩共同保护建设我们的家园吧！

第一种方法就是DOM tree中添加节点的方法，但是推荐使用第二种既简略明了又不必操作DOM的方法：

var option = new Option("option text", "option value");
selectBox.add(option, undefined);  //第二个参数为新增选项后面选项的索引

这类方法是使用Option构造函数来创立新选项，虽然构造函数会创立一个Object的实例，但是兼容DOM的浏览器会返回一个option元素。也就是说，仍然可以使用appendChild()添加选项，但是这类方法在IE浏览器中存在BUG，因而使用选择框的add()方法最为适当。另外，构造函数Option的第二个参数为非必须的，即新增的option元素可以没有value属性。

    有增加天然有删除，移除选项的方法跟增加选项方法基本上是对应的。首先，使用DOM的removeChild()方法，传入要移除的选项，如下所示：

selectBox.removeChild(selectBox.options[index]); //index为要移除选项的索引

第二方法是使用选项卡的remove()方法：

selectBox.remove(index);

表现后面的方法更加简练，易于懂得。这里还存在一个较为陈旧的方法：就是将要移除的选项置空null。

selectBox.options[index] = null;

如果要删除全部的选项，就得进行循环删除：

function clearSelectBox(selectBox){
    for(var i=0,len=selectBox.options.length;i<len;++i){
        selectBox.remove(0);
    }
}

remove()方法也可以不传入参数，缺省情况下移除index为0的选项。最后讲讲如何移动选择框里面的选项，这里也有两种方法进行移动，一种为DOM标准出现之前的陈旧方法，须要从第一个选择框中移除选项，然后创立相同的选项添加到第二个选择框中。这类方法简略，但是非常繁琐。那我们就是用第二种方法：DOM的appendChild()，这个方法不是用来添加节点的么？

    如果给appendChild()方法传入一个文档中已经存在的元素，那么此方法就会先将其从父元素中移走，并添加到指定的位置（第二个选择框中）。

selectBox1.appendChild(selectBox2.option[0]); //选择框2的第一个元素移到选择框1末端

既然讲了把某个选项从一个选择框移到另一个选择框，那在一个选择框中，如何调整选项的位置呢？看上面的函数：

function forwardStep(option){        //option为选择框中已经存在的元素，否则成了插入选项
    var selectBox = option.parentElement;
    option.index ? selectBox.insertBefore(option, selectBox.options[option.index - 1]) : alert(“The option is the first already”);
}

上诉例子是将选项往前挪动一个位置，也就是插入原来它后面元素的后面。举一反三，往后挪动一个位置，也就是插入它原来后面元素的后面元素的后面，是不是有点绕口，说简略点就是插入它后面元素的后面，代码只有insertBefore()的第二个参数须要变动：selectBox.options[option.index + 2])。具体代码就不再重复了，到现在选择框的基本操作应该都熟悉了吧！

文章结束给大家分享下程序员的一些笑话语录： 爱情观
　　爱情就是死循环，一旦执行就陷进去了。
　　爱上一个人，就是内存泄露--你永远释放不了。
　　真正爱上一个人的时候，那就是常量限定，永远不会改变。
　　女朋友就是私有变量，只有我这个类才能调用。
　　情人就是指针用的时候一定要注意，要不然就带来巨大的灾难。