您当前的位置:首页 > 网站建设笔记 >

javascript 选择框脚本

来源:JavaScript 高级程序设计0

选择框是通过<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>

<script type="text/javascript">
document.getElementById("selLocation").onchange=function(){
	var selectedIndex = this.selectedIndex;
	var selectedOption = this.options[selectedIndex];
	alert("Selected index: "+selectedIndex+"\nSelected text: "+selectedOption.text+"\nSelected value: "+selectedOption.value);
}
</script>

如果用户选择了其中第一项,则选择框的值就是"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);

这里,我们通过一个警告框显示了选中项的索引、文本和值。

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

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

selectbox.options[0].selected = true;

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

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

<script type="text/javascript">
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;
}
</script>

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

<select name="cms" size="4" multiple>
	<option value="1">phpcms常见问题</option>
	<option value="2">dedecms常见问题</option>
	<option value="3">帝国cms常见问题</option>
	<option value="4">discuz常见问题</option>
</select>
<script type="text/javascript">
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;
}
document.getElementsByName("cms")[0].onblur=function(){
	var selectedOptions = getSelectedOptions(this);
	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);
}
</script>

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

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部