3.添加选项
// 如需要动态的添加选项,我们提供两种方案:DOM和Option构造函数;
(1).DOM
var option = document.createElement('option');
option.appendChild(document.createTextNode('北京 text'));
option.setAttribute('value','北京 value');
city.appendChild(option);
(2).Option构造函数
var option = new Option('北京 text','北京 value');
city.appendChild(option); // IE出现bug;
(3).使用add()方法来添加选项:
var option = new Option('北京 text','北京 value');
city.add(option,0); // 0,表示添加到第一位;
// PS:在DOM规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项;
// 但在IE中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪;
// 为了兼容性,可以传递undefined即可兼容;
city.add(option,null); // IE不显示了;
city.add(option,undefined); // 兼容;
4.移除选项
// 有三种方式可以移除某一个选项:DOM移除/remove()方法移除和null移除; city.removeChild(city.option[0]); // DOM移除; city.remove(0); // remove()移除,推荐; city.options[0] = null; // null移除; // PS:当第一项移除后,下面的项,往上移,所以不停的移除第一项,即可全部移除;
5.移动选项
// 如果有两个选择框,把第一个选择框里的第一个选项移到第二个选择框里,并且第一个选择框里的第一项被移除; var city = fm.elements['city']; // 第一个选择框; var info = fm.elements['info']; // 第二个选择框; info.appendChild(city.options[0]); // 移动,并在第一个选择框中删除;
6.排列选项
选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用;
复制代码 代码如下:
var option1 = city.options[1];
city.insertBefore(option1,city.options[option1.index-1]); // 往上移位;
7.单选按钮
// 通过checked属性来获取单选按钮的值; for(var i=0; i<fm.sex.length; i++){ // 循环单选按钮; if(fm.sex[i].checked == true){ // 遍历每一个,找出处于选中状态的那一个; alert(fm.sex[i].value); // 得到值; } } // PS:除了checked属性之外,单选按钮还有一个defaultChecked按钮, // 它获取的是原本的checked按钮对象,而不会因为checked的改变而改变; if(fm.sex[i].defaultChecked == true){ alert(fm.sex[i].value); }
8.复选按钮
// 通过checked属性来获取复选按钮的值, var love = ''; for(var i=0; i<fm.love.length; i++){ if(fm.love[i].checked == true){ love += fm.love[i].value; } } alert(love);
您可能感兴趣的文章: