14.3 选择框脚本
?选择框在HTML中的一般形式：
<select name="location" id="selLocation">
<option value="Sunnyvalue,CA">Sunnyvalue</option>
<option value="Los Angeles,CA">Los Angeles</option>
<option value="Mountain View,CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>select的value有以下几种情况：
- 如果没有选中选项，则value为空字符串；
- 如果选中了一项，则value为该option的value；
- 如果选中了一项，但该option没有value，则select的value为option的text；
- 如果选中多项，则value为第一个选中项的值。
每一个option都有以下的属性：
- index：当前项在options集合中的索引
- label：当前选项的标签
- selected：布尔值，当前项是否被选中
- text：选项的文本
- value：选项的值
通过以下方式访问：
var text = select.options[0].text;
var value = select.options[0].value;
var index = select.options[0].index;
var label = select.options[0].label;
var selected = select.options[0].selected;select的change事件与其他的不一样，只要选中了选项就会触发。其他控件的change事件是在值被修改且焦点离开当前字段时才会触发。
14.3.1 选择选项
通过selectedIndex可以获得选中项的序号index，通过下面代码可以得到被选中项的text：
var select = document.getElementById("selLocation");
var seleIndex = select.selectedIndex; // 得到被选中option的序号
var selectedOption = select.options[seleIndex]; // 通过序号来取得选中的项
alert(selectedOption.text); // 显示选中项的文本也可以通过设置selectedIndex来使某个option被选中：
select.selectedIndex = 1;还可以设置某个option的selected = true来表示某个选项被选中：
select.options[1].selected = true;如果select是多选的，可以通过循环遍历来确定哪些项被选中了：
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;
}14.3.2 添加选项
var selectbox = document.getElementById("selLocation");
// 创建元素
var newOption = document.createElement("option");
// 为元素文本的子节点
newOption.appendChild(document.createTextNode("新增加的option"));
newOption.setAttribute("value","newValue");
// 将新的节点挂到select下面
selectbox.appendChild(newOption);14.3.3 移除option
可以使用以下方式移除某一项：
selectbox.removeChild(selectbox.options[0]);
selectbox.remove(0);
selectbox.options[0] = null;在这里还编制了一个函数可以用来清除所有option：
// 移除所有select的option项
function clearSelectbox(selectbox) {
var len = selectbox.options.length;
for (i=len;i>0;i--){
selectbox.remove(i);
}
}14.3.4 移动和重排选项
可以使用appendChild将option从一个select移动到另一个select下面。
var selectbox1 = document.getElementById("selectbox1");
var selectbox2 = document.getElementById("selectbox2");
selectbox2.appendChild(selectbox1.options[1]);移动与移除option会重排index，使用insertBefore方法还能移动位置：
var optionToMove = selectbox1.options[1];
selectbox1.insertBefore(optionToMove,selectbox1.options[optionToMove.index-1]);
14.4 表单序列化
// 对form进行序列化
function serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文件输入
case "submit": //提交按钮
case "reset": //重置按钮
case "button": //自定义按钮
break;
case "radio": //单选按钮
case "checkbox": //复选框
if (!field.checked){
break;
}
/* 执行默认操作 */
default:
//不包含没有名字的表单字段
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}