Javascript高级编程学习笔记（79）—— 表单（7）选择框脚本

选择框脚本

选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外

HTMLSelectElement 类型还提供下列特有的属性和方法:

1. add(newOption, relOption) : 向控件中插入新的 option 位于 relOption 之前
2. multiple : 布尔值,表示空间是否允许多选,多选 type 值为 select-multiple 否则为 select-one
3. options : 所有 option 的 HTMLCollection 集合
4. remove( index )：移除指定位置的的选项
5. selectIndex: 从0开始,表示当前选中项在所有选项中的索引,若没有选中项那么值为 -1
6. size : 选择框的可见行数

对于选择框的值有以下几点:

• 如果没有选中项,则选择框的 value 属性的值为空字符串
• 如果有一个选中项且在HTML中指定了 value 特性,那么选择框的值与选中项的 value 值一致,如:

  <option value="example"></option>

• 如果有一个选中项但在HTML中没有指定 value 特性,那么选择框的值与选中项的文本一致,如:

  <option>Example</option>

• 如果有多个选中项,那么选择框将根据上面两条规则获取选中的第一个选项的值

此外在DOM中,每个<option>元素都由一个 HTMLOptionElement 对象表示,以便访问数据

该对象拥有以下属性:

• index :　当前选项在　options 集合中的索引
• label : 当前选项的标签, 等价于HTML中的 label 特性
• selected : 布尔值,表示当前选项是否被选中,设置为 true 可以设置当前选项
• text : 当前选项的文本
• value : 选项的值

上面的属性都是为了提高对选项数据的访问效率

虽然可以使用 getAttribute() 等DOM方式访问,但是效率低下

PS: 选择框的 change 事件的触发条件和其它表单字段有所不同,当选择了不同的选项时就会触发,不需要失去焦点

选择选项

对于只允许选择一项的选择框来说,访问选中项的最简单的方式就是使用选择框的 selectedIndex 属性:

var selectedOption = selectBox.options[selectBox.selectedIndex];// 获取选中的选项

但是对于可以选择多项的选择框, selectedIndex 属性表现和不允许多选一致,则设置该属性会取消之前所有选中的项,然后选中指定的那一项

并且读取该属性也只能获取所有选中项中的第一个

所以如果需要获取所有选中的项,则需要对所有的 option 进行遍历

通过 option 的 selected 属性来判断,此外对于单选的选择框将其的 selected 的值设置为 false 并不会有影响

获取所有选中的 option 可以使用以下函数:

function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;

    for(let i = 0,len = selectbox.options.length; i < len ; i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    
    return result;
}

添加选项

我们可以使用JS动态创建选项,并将其添加到选择框中

以添加一个 option 到选项框的末尾为例:

使用DOM方式如下所示:

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("option text"));
newOption.setAttribute("value","Option value");

selectbox.appendChild(newOption);

使用option构造函数的方式如下:

var newOption = new Option("option text","Option value");

selectbox.appendChild(newOption);

使用 select 的 add 方法:

var newOption = new Option("option text","Option Value");

selectbox.add(newOption, undefined);// 最佳方案

移除选项

与添加选项类似,移除选项也有多种方法

首先可以使用 removeChild 方法

selectbox.removeChild(selectbox.options[0]);// 移除第一个选项

也可以使用选择框的 remove 方法

selectbox.remove(0);

还可以将相应选项的值设置为 null

selectbox.options[0] = null;

需要注意的是当我们移除选项时,剩余的选项会依次向前补全位置

所以如果希望移除所有的选项,那么我们只需要循环地移除选项中的第一个即可

移动和重排

在DOM标准出现之前,将一个选择框中的选项移动到另一个选择框中是十分麻烦的

整个过程需要先从第一个选择框移除选项,然后以相同的值创建一个 option 选项

再将创建好的 option 移入第二个选项框

但是使用 DOM 的appendChild 方法就可以轻松完成该操作,因为appendChild 方法会先将指定节点从其父节点移除

然后再将其插入文档的指定位置:

var selectbox1 = document.getElementById("selectbox1");
var selectbox2 = document.getElementById("selectbox2");

selectbox2.appendChild(selectbox1.options[0]);

移动选项与移除选项有着相近的地方,那就是都会重置 index 属性

对于重排选项次序来说,最适合的 DOM 方法就是 insertBefore:

var optionToMove = selectbox.optionsp[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);