表单和html辅助方法的注意,JavaScript 表单脚本——“选择框脚本”的注意要点

本文介绍如何使用select和option元素创建并操作选择框,包括添加、删除选项,设置多选等功能,以及通过DOM方法实现选择框的动态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

选择框通过select和option元素创建的。除了共有的属性和方法外,下面的是特有的属性和方法:

add(newOption,relativeOption): 向控件中插入新元素,其位置相关项relativeOption之前

multiple: 布尔值,表示是否允许多项选择,等价于HTML的multiple特性

options: 控件中所有元素的HTMLCollection

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

selectedIndex: 基于0的选中项的索引,如果没有选中项的索引,则值为“-1”

size: 选择框中的可见行数,等价于HTML的size特性

如(旧方法,新方法在后面):

var selection = document.getElementById("cars");

var addOption = document.getElementById("addOption");

selection.selectedIndex = -1; //已选择的项目-1为不选;0为第一个

//添加新选项

addOption.addEventListener("click", function() {

var newOption = document.createElement("option");

newOption.value = "swift";

newOption.class = "swift";

newOption.appendChild(document.createTextNode("swift"));

selection.add(newOption, selection.options[selection.options.length]); //add()方法添加 .options表示控件中所有的选项

addOption.disabled = true;

});

//设置为多项选择

var multiple = document.getElementById("multiple");

multiple.addEventListener("click", function() {

selection.multiple = true; //multiple表示是否为多选

selection.size = 2; //size表示可见的行数

});

//删除选项

var deleteOption = document.getElementById("delete");

deleteOption.addEventListener("click", function() {

selection.remove(0); //remove()方法接收index

if (selection.options.length < 1) {

var newOption = document.createElement("option");

newOption.value = "none";

newOption.class = "none";

newOption.appendChild(document.createTextNode("none"));

selection.add(newOption, selection.options[selection.options.length]);

selection.disabled = true;

}

});

//获得选项的值

var output = document.getElementById("output");

selection.addEventListener("change", function () {

output.firstChild.nodeValue = "Cars: " + selection.value;

});

需要注意,选择框type属性不是“select-one”就是“select-multiple”,这取决于HTML代码中有无multiple特性。

另外,value属性规则如下:

没有选中:value为空字符串;

选择一个,value特性在HTML中指定:value为指定的值;

选择一个,value特性在HTML中未指定:value为该选项的文本;

选择多个,依据前两条规则取得第一个选中项的值;

在DOM中,每个元素都有一个HTMLOptionElement对象表示。为了便于访问,HTMLOptionElement对象添加了下列属性:

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

label:当前选项的标签,等价于HTML中的label标签

selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项

text:选项的文本

value:选项的值,等价于HTML的value特性。

如:

var text = selection.options[0].text; //获取选项的文本

var text = selection.options[0].value; //获取选项的值

选择的项

selectedIndex属性

对于只能选择一项的选项,访问选中项的方式是使用选择框的selectedIndex属性。对于多选项,selectedIndex只返回第一项的索引值。

var selectedOption = selection.options[selection.selectedIndex]

如:

var output = document.getElementById("output");

selection.addEventListener("change", function () {

output.firstChild.nodeValue = "Value: " + selection.options[selection.selectedIndex].value + "; Index: " + selection.selectedIndex + "; Text: " + selection.options[selection.selectedIndex].text;

});

或者冻结,只能选择某个选项

selection.addEventListener("change", function () {

output.firstChild.nodeValue = selection.options[0].selected = true;

});

selected属性

多选的情况下可以设置多个选项的selected属性为true:

selection.multiple = true;

selection.options[0].selected = true;

selection.options[2].selected = true;

可以遍历所有的选中项:

function getSelectedOptions(selectbox) {

var result = [];

var option = null;

for (var i = 0; i < selectbox.options.length; i++) {

if (selectbox.options[i].selected) {

result.push(selectbox.options[i]);

}

}

return result;

}

var list = getSelectedOptions(selection);

list.forEach( function(element, index) {

console.log(element.value); //log所有被选中的选项

});

添加选项

DOM方法

第一种方法DOM方法:

var selection = document.getElementById("cars");

var newOption = document.createElement("option");

newOption.appendChild(document.createTextNode("Option text"));

newOption.value = "Option value";

selection.appendChild(newOption);

Option构造函数方法(IE中有bug)

第二种方法Option构造函数(接收两个参数:text,value):

var selection = document.getElementById("cars");

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

selection.appendChild(newOption); //这里可以用appendChild来添加,但在IE8及以前会出现问题

add()方法(推荐!)

第三种方法使用add函数(接收两个参数:新选项,位于新选项最后的选项;如果要插入成为最后的选项,第二个参数应该设置为undefined):

var selection = document.getElementById("cars");

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

selection.add(newOption,undefined); //第二个参数说明最新的option放在最后

如果要添加到别处,应当使用DOM方法和insertBefore();

移除选项

第一种方法DOM方法(利用removeChild方法):

selection.removeChild(selection.options[0]);

第二种方法用选择框的remove方法:

selection.remove(0); //移除第一个

第三种为设置null:

selection.options[0] = null;

或者删除所有的选项(要注意:由于移除第一个选项后,所有后续选项都会自动向上移动一个位置,所以重复删除第一个选项就可以删除所有选项了。for循环内部需要把i替换成0):

var selection = document.getElementById("cars");

for (var i = 0, len = selection.options.length; i < len; i++) {

selection.removeChild(selection.options[0]);

// selection.remove(0);

// selection.options[0] = null;

};

也有网友说用innerHTML更方便;

移动和重排选项

移动选项用appendChild()方法:

var selection = document.getElementById("cars");

var selection2 = document.getElementById("cars2");

selection2.appendChild(selection.options[0]);

比如说让某个选项从一个选择框中移动到另一个选择框中:

var selection = document.getElementById("cars");

var selection2 = document.getElementById("cars2");

var transfer = document.getElementById("transfer");

transfer.addEventListener("click", function() {

var selectedOptions = [];

for (var i = 0, len = selection.options.length; i < len; i++) {

if (selection.options[i].selected) {

selectedOptions.push(selection.options[i]);

}

};

for (var i = 0; i < selectedOptions.length; i++) {

selection2.appendChild(selectedOptions[i]);

}

});

重排序则需要利用到insertBefore()方法;

如果要让某个选项向上移动一格则:

var selection = document.getElementById("cars");

selection.insertBefore(selection.options[1],selection.options[0]);

或者按按钮让某个选项向上移动:

var selection = document.getElementById("cars");

var moveOptions = document.getElementById("transfer");

moveOptions.addEventListener("click", function() {

for (var i = 0, len = selection.options.length; i < len; i++) {

//如果这个选项被选中了,并且这个选项不是第一个

if ((selection.options[i].selected) && (selection.options[i] != selection.options[0]) ) {

//则选择的选项插入到前面的选项的前面

selection.insertBefore(selection.options[i], selection.options[i - 1]);

}

};

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值