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])。具体代码就不再重复了，到现在选择框的基本操作应该都熟悉了吧！