首页 » JavaScript » 选择(option)选项

选择(option)选项

对于只允许选择一项的选择框,访问选中项的最简单方式,就是使用选择框的selectedIndex属性,如下面的例子所示:

var selectedOption =  selectbox.options[selectbox.selectedIndex];

取得选中项之后,可以像下面这样显示该选项的信息:

var selectbox = document.getElementById("selLocation");
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
alert("Selected index: " + selectedIndex + "\nSelected text: " + selectedOption.text + "\nSelected value: " + selectedOption.value);

对于可以选择的多项的选择框,设置selectedIndex会导致取消以前的所有选项并选择指定的那一项,而读取selectedIndex则只会返回选中项第一项的索引值。

另一种选择选项的方式,就是取得对某一项的引用,然后将其selected属性设置为true。例如,下面的代码会选中选择框中的第一项:

selectbox.option[0].selected = true;

与selectedIndex不同,在允许多选的选择框中设置选项的selected属性,不会取消对其他选中项的选择,因而可以动态选中任意多个项。但是,如果是在单选选择框中,修改某个选项的selected属性则会取消对其它选项的选择。需要注意的是,将selected属性设置为false对单选选择框没有影戏nag。

实际上,selected属性的作用主要是确定用户选择了选择框框中的那一项。要取得所有选中的项,可以循环遍历所选集合,然后测试每个选项的selected属性。来看下面的例子:

function getSelectedOptions(selectbox) {
    var result = new Array();
    var option = null;
    for (var i = 0, len = selectbox.options.length; i < len; i++) {
        option = selectbox.options[i];
        if (option.selected) {
            result.push(option);
        }
    }
    return result;
}

这个函数可以返回给定选择框中选中项的一个数组。首先,创建一个将包含选中项的数组,然后使用for循环迭代所有选项,同时检测每一项的selected属性。如果没有选项被选中,则将其添加到result数组中。最后,返回包含选项的数组。虾米那是一个使用getSelectedOptions()函数取得选中项的实例:

var selectbox = document.getElementById("selLocation");
var selectedOptions = getSelectedOptions(selectbox);
var message = "";
for (var i = 0, len = selectedOptions.length; i < len; i++) {
    message += "Selected index: " + selectedOptions[i].index + "\nSelected text: " + selectedOptions[i].text + "\nSelected value: " + selectedOptions[i].value + "\n\n";
}
alert(message);

在这个例子中,我们首先从一个选择框中取得了选中项。然后,使用for循环构建了一条消息,包含所有选中项的信息:每一项的索引、文本和值。这种技术适用于于单选和多选选择框。

此文章发表在 JavaScript 标签为 . 将固定链接加入收藏.