表单选择框脚本

选择框(下拉、单选和复选)除了通用的一些属性和方法外，HTMLSelectElement类型还提供了如下的属性和方法：

add(new,rel)：插入新元素，并指定位置
multiple：布尔值，是否允许多项选择
options：<option>元素的HTMLColletion集合
remove(index)：移除给定位置的选项
selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1，如果是多项选择，他始终返回的是第一个项
size：选择框中可见的行数

在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

index：当前选项在options集合中的索引
label：当前选项的标签
selected：布尔值，表示当前选项是否被选中
text：选项的文本
value：选项的值，当选项没有value值的时候，IE会返回空字符串，其他浏览器会返回text值
type：选项类型(有两个值select-one和select-multiple，这取决于HTML代码中有没有multiple属性。)

添加选项(add(new,rel))：可以使用DOM和add()两种办法

DOM方法：

var option = document.createElement('option');
option.appendChild(document.createTextNode('文本'));
option.setAttribute('value', 'val值')
city.appendChild(option);

add()方法添加选项：

var option = new Option('文本', 'val值');
city.add(option, 0); //0，表示添加到第一位

add()中两个参数是必须的，如果不确定索引，那么第二个参数设置null即可，即默认移入最后一个选项。但IE中规定第二个参数是可选的，所以设置null表示放入不存在的位置，导致失踪，为了兼容性，我们传递undefined即可兼容。

city.add(option, null); //IE不显示了
city.add(option, undefined); //兼容了

移除选项

有三种方式可以移除某一个选项：DOM移除、remove()方法移除和null移除。

city.removeChild(city.options[0]); //DOM移除
city.remove(0); //remove()移除，推荐
city.options[0] = null; //null移除
当第一项移除后，下面的项往上顶，所以不停的移除第一项，即可全部移除。

移动选项

如果有两个选择框，把第一个选择框里的第一项移到第二个选择框里，并且第一个选择框里的第一项被移除。

var city = fm.elements['city']; //第一个选择框
var info = fm.elements['info']; //第二个选择框
info.appendChild(city.options[0]); //移动，被自我删除

排列选项

选择框提供了一个index属性，可以得到当前选项的索引值，和selectedIndex的区别是，一个是选择框对象的调用，一个是选项对象的调用。

var option1 = city.options[1];
city.insertBefore(option1, city.options[option1.index - 1]); //往下移动移位

单选按钮

通过checked属性来获取单选按钮的值。

for (var i = 0; i < fm.sex.length; i ++) { //循环单选按钮
    if (fm.sex[i].checked == true) { //遍历每一个找出选中的那个
        alert(fm.sex[i].value); //得到值
    }
}

除了checked属性之外，单选按钮还有一个defaultChecked按钮，它获取的是原本的checked按钮对象，而不会因为checked的改变而改变。

复选按钮

通过checked属性来获取复选按钮的值。复选按钮也具有defaultChecked属性。

var love = '';
for (var i = 0; i < fm.love.length; i ++) {
    if (fm.love[i].checked == true) {
        love += fm.love[i].value;
    }
}
alert(love);