JavaScript--18 操作 form 表单的选择框
选择框脚本
- 选择框简介
- select 的属性和方法
- option 的属性
- 选择选项的方式
- 使用 selectedIndex 属性
- 设置 selected 属性
- 添加选项的方法
- 使用 DOM 操作
- 使用 Option 构造函数
- 使用 add() 方法
- 移除选项的方法
- 使用 removeChild 方法
- 使用 remove() 方法
- 设置为 null
- 移除所有项
- 移动选项
- 选择框间移动
- 选择框内移动
选择框简介
选择框是通过和元素创建的。
以下面的选择框为例：
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvaleoption>
<option value="Los Angeles, CA">Los Angelesoption>
<option value="Mountain View, CA">Mountain Viewoption>
<option value="">Chinaoption>
<option>Australiaoption>
select>
如果用户选择了其中第一项，则选择框的值就是"Sunnyvale, CA"。如果文本为"China"的选项被选中，则选择框的值就是一个空字符串，因为其value特性是空的。如果选择了最后一项，那么由于中没有指定value 特性，则选择框的值是"Australia"。
select 的属性和方法
add(newOption, relOption)：向控件中插入新元素，其位置在相关项（relOption）之前。multiple：布尔值，表示是否允许多项选择；等价于HTML 中的multiple特性。options：控件中所有元素的HTMLCollection。remove(index)：移除给定位置的选项。selectedIndex：基于0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。size：选择框中可见的行数；等价于HTML 中的size特性。
选择框的value属性由当前选中项决定，相应规则如下。
- 如果没有选中的项，则选择框的
value属性保存空字符串。 - 如果有一个选中项，而且该项的
value特性已经在HTML 中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。 - 如果有一个选中项，但该项的
value特性在HTML 中未指定，则选择框的value属性等于该项的文本。 - 如果有多个选中项，则选择框的
value属性将依据前两条规则取得第一个选中项的值。
option 的属性
index：当前选项在options集合中的索引。label：当前选项的标签；等价于HTML 中的label特性。selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。text：选项的文本。value：选项的值（等价于HTML 中的value特性）。
获取option元素的属性和值：
var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value; //选项的值
注意一点：选择框的change 事件与其他表单字段的change事件触发的条件不一样。其他表单字段的change事件是在值被修改且焦点离开当前字段时触发，而选择框的change事件只要选中了选项就会触发。
选择选项的方式
使用 selectedIndex 属性
var selectedOption = selectbox.options[selectbox.selectedIndex];
console.log(selectedOption.value , selectedOption.text);
要注意的是，对于可以选择多项的选择框，selectedfIndex 属性就好像只允许选择一项一样。
设置selectedIndex会导致取消以前的所有选项并选择指定的那一项，而读取selectedIndex则只会返回选中项中第一项的索引值。
设置 selected 属性
与selectedIndex不同，在允许多选的选择框中设置选项的selected属性，不会取消对其他选中项的选择，因而可以动态选中任意多个项。
但是，如果是在单选选择框中，修改某个选项的selected属性则会取消对其他选项的选择。需要注意的是，将selected属性设置为false 对单选选择框没有影响。
selectbox.options[0].selected = true;
取得所有选中的项的示例如下，这个函数可以返回给定选择框中选中项的一个数组。首先，创建一个将包含选中项的数组，然后使用for 循环迭代所有选项，同时检测每一项的selected 属性。如果有选项被选中，则将其添加到result数组中。最后，返回包含选中项的数组。
// 封装方法
function getSelectedOptions(selectbox){
var result = new Array();
var option = null;
for (var i=0, len=selectbox.options.length; i < len; i++){
option = selectbox.options[i];
if (option.selected){
result.push(option);
}
}
return result;
}
// 使用实例
var selectbox = document.getElementById("selLocation");
var selectedOptions = getSelectedOptions(selectbox);
var message = "";
for (var i=0, len=selectedOptions.length; i < len; i++){
message += "Selected index: " + selectedOptions[i].index +
"\nSelected text: " + selectedOptions[i].text +
"\nSelected value: " + selectedOptions[i].value + "\n\n";
}
console.log(message);
添加选项的方法
使用 DOM 操作
先创建一个新的元素，然后为它添加了一个文本节点，并设置其value 特性，最后将它添加到了选择框中。
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
使用 Option 构造函数
Option构造函数接受两个参数：文本（text）和值（value）；第二个参数可选。
虽然这个构造函数会创建一个Object的实例，但兼容DOM 的浏览器会返回一个元素。
换句话说，在这种情况下，我们仍然可以使用appendChild()将新选项添加到选择框中。
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在IE8 及之前版本中有问题
使用 add() 方法
DOM 规定这个方法接受两个参数：要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项，应该将第二个参数设置为null。在IE 对add()方法的实现中，第二个参数是可选的，而且如果指定，该参数必须是新选项之后选项的索引。这时候，为第二个参数传入undefined，就可以在所有浏览器中都将新选项插入到列表最后了：
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案
移除选项的方法
使用 removeChild 方法
使用DOM 的removeChild()方法，为其传入要移除的选项，如下面的例子所示：
selectbox.removeChild(selectbox.options[0]); //移除第一个选项
使用 remove() 方法
这个方法接受一个参数，即要移除选项的索引，如下面的例子所示：
selectbox.remove(0); //移除第一个选项
设置为 null
selectbox.options[0] = null; //移除第一个选项
移除所有项
要清除选择框中所有的项，需要迭代所有选项并逐个移除它们，如下面的例子所示：
function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
selectbox.remove(0);
}
}
这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后，所有后续选项都会自动向上移动一个位置，因此重复移除第一个选项就可以移除所有选项了。
移动选项
选择框间移动
使用DOM 的appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选择框中。我们知道，如果为appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置：
var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);
选择框内移动
要将选择框中的某一项移动到特定位置，最合适的DOM 方法就是insertBefore()；appendChild()方法只适用于将选项添加到选择框的最后。要在选择框中向前移动一个选项的位置，可以使用以下代码：
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);
以上代码首先选择了要移动的选项，然后将其插入到了排在它前面的选项之前。实际上，第二行代码对除第一个选项之外的其他选项是通用的。类似地，可以使用下列代码将选择框中的选项向后移动一个位置：
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);