首页 > js学习 > js基础知识 > 表单选择框脚本
2016
12-16

表单选择框脚本

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

add(new,rel):插入新元素,并指定位置

multiple:布尔值,是否允许多项选择

options:<option>元素的HTMLColletion集合

remove(index):移除给定位置的选项

selectedIndex:基于0的选中项的索引,如果没有选中项,则值为-1,如果是多项选择,他始终返回的是第一个项

size:选择框中可见的行数

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

index:当前选项在options集合中的索引

label:当前选项的标签

selected:布尔值,表示当前选项是否被选中

text:选项的文本

value:选项的值

type:选项类型(有两个值select-one和select-multiple,这取决于HTML代码中有没有multiple属性。)

当选项没有value值的时候,IE会返回空字符串,其他浏览器会返回text值。

添加选项(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,表示添加到第一位

在DOM规定,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);

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。