javascript基础：表单处理3

一、选择框脚本

1、选择框脚本介绍

选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外, 

<form action="" id="myform" name="dform">
    <select id="myselect" name="dselect">
        <option value="Beijing">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
</form>

2、选择框脚本的获取及属性

window.addEventListener('load',function(){
    var fm = document.getElementById('myform'); //得到form对象
    //以下使用的是HTML Dom的方法，也可以是用Dom对象的方法只是比较麻烦
    var sele = fm.elements['dselect'];//得到select对象
    var options = sele.options;//得到option数组。
    var option = options[0]; //拿到某个具体的option
    alert(option.text);//北京 
    alert(option.value);//BeiJing;
},false);

HTMLSelectElement对象

属性/方法	说明
add(new,rel)	插入新元素,并指定位置
multiple	布尔值,是否允许多项选择

options	<option>元素的HTMLColletion集合
remove(index)	移除给定位置的选项
selectedIndex	基于0的选中项的索引,如果没有选中项,则值为-1
size	选择框中可见的行数

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

HTMLOptionElement对象

属性	说明
index	当前选项在options集合中的索引
label	当前选项的标签
selected	布尔值,表示当前选项是否被选中
text	选项的文本
value	选项的值

PS:操作select时,最好使用HTML DOM,因为所有浏览器兼容的很好。而如果使用标准DOM,会因为不同的浏览器导致不同的结果。

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

二、selectedIndex、selected、index的用法

1、selectedIndex

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    //选择改变就调用这个方法
    sele.addEventListener('change',function(){
        var index = this.selectedIndex;//拿到改变的option的索引
        var option = this.options[index];//通过索引拿到option对象
        alert(option.value + '|' + option.text);
    });
    sele.selectedIndex = 2;//也可以通过赋值来改变选择。
},false);

2、selected

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    dele.addEventListener('change',function(){
        var option = sele[1];
        var isSelectec = option.selected;//布尔值，用来判断某个option是否被选中
        if(isSelectec){
            alert(isSelectec);
        }

    },false);

},false);

3、index

index的意义与selectedIndex的意义完全相同，只不过一个是select的属性一个是option的属性

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    var selectecIndex = sele.selectedIndex;
    var index = sele.options[selectecIndex].index;
    alert(selectecIndex === index);//true；
},false);

selected和selectedIndex在用途上最大的区别是,selected是返回的布尔值,所以一般用于判断上;而selectedIndex是数值,一般用于设置和获取。

另一方面select和index是option对象的属性，而selectedIndex是select的属性 

三、对option的操作

如需动态的添加或移除选项我们有两种方案:DOM和Option构造函数。 推荐使用option构造函数比较简单

1、添加一个option

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    var option = new Option('杭州','hangzhou');//第一个参数为text，第二个参数为value；
    sele.add(option,1);//第一个参数为要添加的option对象，第二个参数为位置。当不传位置时应传undefined；
},false);

2、删除一个option

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    sele.remove(0);//传入要移除的位置。移除后下边的option自动填上，所以要全部移除只需不停的移除0位置的即可。
},false);

3、移动option

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var sele = fm.elements['dselect'];
    var option = sele.options[1];
    sele.insertBefore(option,sele.options[option.index-1]);//表示向前移动一位。
},false);