表单（三）选择框

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          允许多项选择时为true2. 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的标签label3. 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)