Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 JavaScript 选择option选项的方法

JavaScript 选择option选项的方法

发布时间:2015-01-27   编辑:www.jquerycn.cn
本文介绍下,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 + "\n\n";
}
alert(message);
 

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

>>>

您可能感兴趣的文章:
探讨JavaScript的选择框脚本
javascript操作Select options集合的实例介绍
radio和checkbox及php select默认选择的实现代码
JavaScript 选择option选项的方法
Jquery获取Select下拉框中Text与Value的方法详解
JavaScript 移动和重排option选项的方法
Javascript如何获取select的选中值和选中文本
jQuery操作select option选项(增加 删除 修改)
JavaScript 添加option选项的方法
jQuery获取Select中Text与Value值

[关闭]