首先我们对选择框脚本作一个基本介绍同时介绍下有那些参数。
选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段共 有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。
add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption） 之前。
multiple：布尔值，表示是否允许多项选择；等价于 HTML中的 multiple 特性。
options：控件中所有<option>元素的 HTMLCollection。
remove(index)：移除给定位置的选项。 网站建设
selectedIndex：基于 0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件， 只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于 HTML中的 size 特性。 选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML代码中有 没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下。
如果没有选中的项，则选择框的 value 属性保存空字符串。
如果有一个选中项，而且该项的 value 特性已经在 HTML中指定，则选择框的 value 属性等 于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的 value 特性在 HTML中未指定，则选择框的 value 属性等于该 项的文本。
如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。 以下面的选择框为例：
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option> <option>Australia</option>
</select>
如果用户选择了其中第一项，则选择框的值就是"Sunnyvale, CA"。如果文本为"China"的选项 被选中，则选择框的值就是一个空字符串，因为其 value 特性是空的。如果选择了后一项，那么由 于<option>中没有指定 value 特性，则选择框的值就是"Australia"。
在 DOM 中，每个<option>元素都有一个 HTMLOptionElement 对象表示。为便于访问数据， HTMLOptionElement 对象添加了下列属性：
index：当前选项在 options 集合中的索引。
label：当前选项的标签；等价于 HTML中的 label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。 text：选项的文本。
value：选项的值（等价于 HTML中的 value 特性）。 其中大部分属性的目的，都是为了方便对选项数据的访问。虽然也可以使用常规的 DOM功能来访 问这些信息，但效率是比较低的，如下面的例子所示：
var selectbox = document.forms[0].elements["location"];
//不推荐 var text = selectbox.options[0].firstChild.nodeValue; //选项的文本
var value = selectbox.options[0].getAttribute("value"); //选项的值
以上代码使用标准 DOM方法，取得了选择框中第一项的文本和值。可以与下面使用选项属性的代 码作一比较：
var selectbox = document.forms[0]. elements["location"];
//推荐
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value; //选项的值
在操作选项时，我们建议好是使用特定于选项的属性，因为所有浏览器都支持这些属性。在将表 单控件作为 DOM节点的情况下，实际的交互方式则会因浏览器而异。我们不推荐使用标准 DOM技术 修改<option>元素的文本或者值。 最后，天津网站建设公司前端开发工程师还想提醒读者注意一点：选择框的 change 事件与其他表单字段的 change 事件触发的 条件不一样。其他表单字段的 change 事件是在值被修改且焦点离开当前字段时触发，而选择框的 change 事件只要选中了选项就会触发。
不同浏览器下，选项的 value 属性返回什么值也存在差别。但是，在所有浏览 器中，value 属性始终等于 value 特性。在未指定 value 特性的情况下，IE8会返 回空字符串，而 IE9+、Safari、Firefox、Chrome和 Opera则会返回与 text 特性相同 的值。
接下来详细介绍选择选项具体操作方法：
对于只允许选择一项的选择框，访问选中项的简单方式，就是使用选择框的 selectedIndex 属 性，如下面的例子所示：
var selectedOption = selectbox.options[selectbox.selectedIndex];
取得选中项之后，可以像下面这样显示该选项的信息：
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
alert("Selected index: " + selectedIndex + "nSelected text: " + selectedOption.text + "nSelected value: " + selectedOption.value);
这里，天津网络公司前端开发工程师通过一个警告框显示了选中项的索引、文本和值。
对于可以选择多项的选择框，selectedfIndex 属性就好像只允许选择一项一样。设置 selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返 回选中项中第一项的索引值。
另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如， 下面的代码会选中选择框中的第一项：
selectbox.options[0].selected = true;
与selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。需要注意的是，将 selected 属性设置为 false 对单选选择框没有影响。
实际上，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 循环构建了一条消息，包 含所有选中项的信息：每一项的索引、文本和值。这种技术适用于单选和多选选择框。
实例完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Selectbox Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<form method="post" action="javascript:alert('Form submitted!')" id="myForm">
<div>
<label for="selLocation">Where do you want to live?</label>
<select name="location" id="selLocation" size="5" multiple>
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>
</div>
<div>
<input type="button" value="Select first option" id="btnFirst">
<input type="button" value="Select second option" id="btnSecond">
<input type="button" value="Get selected options" id="btnSelected">
</div>
</form>
<script type="text/javascript">
(function(){
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;
}
var btn1 = document.getElementById("btnFirst");
var btn2 = document.getElementById("btnSecond");
var btn3 = document.getElementById("btnSelected");
var selectbox = document.getElementById("selLocation");
EventUtil.addHandler(btn1, "click", function(event){
selectbox.options[0].selected = true;
});
EventUtil.addHandler(btn2, "click", function(event){
selectbox.options[1].selected = true;
});
EventUtil.addHandler(btn3, "click", function(event){
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);
});
})();
</script>
</body>
</html>
以上内容由匠人匠心科技（http://www.wzjs888.com）为您提供，转载请注明出处，更多有关天津网站建设，软件开发，网站代运营优化、微信网站制作(微官网)、手机app开发、企业UI设计等互联网应用服务都可以联系我们。热线：138-2142-0129或致电136-2215-0903张经理。
匠人匠心科技每天都会不定时更新有关天津网站制作以及网络营销推广的文章，希望对您有用。
