JavaScript表单之Select

基本概念

选择框是通过select和option元素创建的。

select的常用属性

multiple属性：布尔值，表示是否允许多项选择；等价于HTML中的multiple属性。
size属性：select中可见的行数；等价于HTML中的size属性。
type属性：属性值为"select-one"或"select-multiple"，取决于HTML代码中有没有multiple属性。

重点讲解下列属性：

1、value属性

select的value属性值有如下几种情况：
① 如果没有选中的项，则select的value属性保存空字符串。
② 如果有一个选中项，而且该项的value属性已经在HTML中指定，则select的value属性等于选中项的value属性。即使value属性的值是空字符串，也同样遵循此条规则。
③ 如果有一个选中项，但该项的value属性在HTML中未指定，则select的value属性等于该项的文本。
④ 如果有多个选中项，则select的value属性将依据前两条规则取得第一个选中项的值。

测试代码：

<select id="selLocation">
    <option value="hello, CA">Hello</option>
    <option value="">Welcome</option>
    <option>China</option>
</select>

var sel=document.getElementById("selLocation");
sel.addEventListener("change",function(){
    alert(sel.value)
    })

2、selectedIndex属性

基于0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。

测试代码：

<select id="selLocation">
    <option value="hello, CA">Hello</option>
    <option value="">Welcome</option>
    <option>China</option>
</select>

var sel=document.getElementById("selLocation");
sel.addEventListener("change",function(){
    alert(sel.options[sel.selectedIndex].text)
    })

3、options属性

返回一个由option元素组成的HTMLOptionElement对象（集合）。

HTMLOptionElement对象有下列常用属性：

① text属性：选项的文本。
② value属性：选项的值（等价于HTML中的value属性）。

测试代码：

<form>
    <select name="selLocation">
        <option value="hello, CA">Hello</option>
        <option value="">Welcome</option>
        <option>China</option>
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
sel.addEventListener("change",function(){
    //推荐写法
    alert(sel.options[sel.selectedIndex].text);
    alert(sel.options[sel.selectedIndex].value);
    //不推荐写法
    alert(sel.options[sel.selectedIndex].firstChild.data);
    alert(sel.options[sel.selectedIndex].getAttribute("value"));
    })

③ selected属性：返回布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。

测试代码：

<form>
    <select name="selLocation">
        <option value="hello, CA">Hello</option>
        <option value="">Welcome</option>
        <option>China</option>
    </select>
</form>

window.onload=function(){
    var sel=document.forms[0].elements["selLocation"];
    sel.options[2].selected=true;
    }

④ index属性：当前选项在options集合中的索引。

测试代码：

<form>
    <select name="selLocation">
        <option value="hello, CA">Hello</option>
        <option value="">Welcome</option>
        <option><a href="#">China</a></option>
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
sel.addEventListener("change",function(){
    for(var i=0,len=sel.options.length;i<len;i++){
        if(sel.options[i].selected){
            alert(sel.options[i].index);
            }
        }
    })

select的常用方法

1、添加option选项

第一种方式就是使用如下所示的DOM方法。

例子：

<form>
    <select name="selLocation">
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
var option=document.createElement("option");
option.appendChild(document.createTextNode("hello"));
option.setAttribute("value","hello");
sel.appendChild(option);

第二种方式是使用Option构造函数来创建新选项。
Option构造函数接受两个参数：文本（text）和值（value）；第二个参数可选。

例子：

<form>
    <select name="selLocation">
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
var option=new Option("hello", "hello");
sel.appendChild(option);

第三种添加新选项的方式是使用select的add()方法。

例子：

<form>
    <select name="selLocation">
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
var option=new Option("hsello", "hello");
sel.add(option,undefined);

*考虑到浏览器的兼容性问题，一般将add()方法的第二个参数传入undefined，这样就可以在所有浏览器中都将新选项插入到列表最后了。如果想添加到其他位置，可以使用insertBefore()这种标准DOM方法。

2、移除option选项

首先，可以使用DOM的removeChild()方法，为其传入要移除的选项。

例子：

<form>
    <select name="selLocation" size="3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
document.addEventListener("click",function(){
    sel.removeChild(sel.options[sel.options.length-1])
    })

其次，可以使用选择框的remove()方法。这个方法接受一个参数，即要移除选项的索引。

例子：

<form>
    <select name="selLocation" size="3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
document.addEventListener("click",function(){
    sel.remove(sel.options.length-1)
    })

最后一种方式，就是将相应选项设置为null。

例子：

<form>
    <select name="selLocation" size="3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

var sel=document.forms[0].elements["selLocation"];
document.addEventListener("click",function(){
    sel.options[sel.options.length-1]=null;
    })

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。