JavaScript 选择option选项的方法

发布时间:2019-07-26编辑:脚本学堂
本文介绍下,javascript实现选择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 + "nn";
}
alert(message);
 

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

>>> 您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
JavaScript 移除option选项的方法
JavaScript 添加option选项的方法
js 添加、修改、删除select中option元素的实现代码
js动态添加与删除 select option的代码
javasript 操作select中option的常用方法
js获取select下拉标签中option的属性值
js删除select下拉列表框中option选项的多种方法(附代码)
js移动(增加删除)select option的实现代码
js 控制select下拉列表框中option选项的上下移动
Js动态添加select的option选项的代码
javascript操作Select options集合的实例介绍
JS动态添加与删除option选项的代码
js页面跳转 option location页面跳转的代码实例