表单（三）选择框

1. 选择框通过<select> 和<option> 创建

<select name="location" id="selectLocation">
   <option value="china">中国</option>
   <option value="England">英国</option>
   <option value="">美国</option>
   <option >俄国</option>
</select>

1. 选择框只要选中选项就会发生change事件，其他表单字段要在值被修改且焦点离开当前字段时才会触发change事件

2. HTMLSelectElement类型为选择框提供的属性和方法：

   1. multiple          允许多项选择时为true
   2. options           所有option集合
   3. selectedIndex     选中项的索引，若没有选中项则为-1，对于多选控件，只保持选中项中第一项的索引
   4. size              选择框中可见的行数
   5. type              单选为"select-one",多选为"select-multiple"
   6. value             若没有指定value特性，则value值为<option></option>间的文本（IE会返回空字符串）
   7. add(新元素，相关项)  在相关项之前插入新元素
   8. remove(位置)       移除给定位置的选项
   

3. 在DOM中，每个元素都有一个HTMLOptionElement对象，该对象有下列属性，方便访问option的数据：

   1. index          该option在options集合中的索引
   2. label          该option的标签label
   3. selected       该option被选中时为true，也可设置该属性为true来选中该选项
   4. text           该option的文本 （例如 selectbox.options[0].text // “中国”）
   5. value          该option的值value （例如 selectbox.options[0].value // “china”）
   

---

【选择选项】

1.获取单选框中的选中项，使用selectedIndex属性：
var selectedIndex = selectbox.options[selectbox.selectedIndex];

2.设置索引为？的选线为选中项，将selected属性设为true：
var selectedOption = selectbox.options[？].selected = true;

！！！若要获取多选框中的选中项们，不能使用selectedIndex属性，因为读取selectedIndex，只会返回所有选中项中的第一项的索引；而设置selectedIndex的值时，会取消以前的所有选项并选择指定的那一项作为结果值返回。

在多选框中，可以通过设置项的selected属性为true来动态选择多个项；
在单选框中，将某项的selected属性设为true后，其他选项均为false。

//获取选择框中选中的所有项（适用于单选和多选框）
function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for(var i=0,len = selectbox.options.length;i<len;i++){
        if(selectbox.options[i].selected == true){
            result.push(selectbox.options[i]);
        }
    }
    return result;
}

---

【添加选项】

1.使用DOM

//第一步，先创建option元素
var newOption = document.createElement("option");   
//第二步，为option元素添加文本节点 
newOption.appendChild(document.createTextNode("选项文本")); 
// 第三步，为option元素设置value特性
newOption.setAttribute("value","value值"); 
//最后一步，把option元素添加到选择框中
selectbox.appendChild(newOption);   

2.使用Option构造函数创建选项，然后再添加到选择框中（该方法IE下不可正常使用）

var newOption = new Option(选项文本，选项value值)；
selectbox.appendChild(newOption);

3.用Option构造函数创建选项,然后用选择框的add(新元素，旧元素)方法

var newOption = new Option(选项文本，选项value值)；
//将新元素插入到选择框选项集合的最后
selectbox.add(newOption，undefine)；
//或者将新元素插入到选择框选项集合的制定位置前面 
selectbox.insertBefore(newOption，位置)； 

---

【移除选项】

1. 使用DOM
   selectbox.removeChild(要移除的项);

2. 使用选择框的remove(?)方法, 移除索引为？的选项
   selectbox.remove(?)

3. 将要移除的选项设为null

//清除选择框中所有的选项
function  clearSelectbox(selectbox){
    for(var i=0, len = selectbox.options.length; i< len; i++){
        selectbox.remove(0);   //重复移除第一个选项即可移除所有的选项
    }
}

---

【移动和重排选项】

1.移动选项（移动到另一个选择框的opions集合的最后）：appendChild()

//将选择框2中索引为？的选项移动到选择框1
选择框1.appendChild(选择框2.options[？])  

移动选项和移除选项都会重置每个选项的index属性

2.重排选项：insertBefore()

选择框.insertBefore(要移动的选项，移动至新的位置+1)