008-访问列表框、下拉菜单的选项

最新推荐文章于 2021-11-09 20:59:46 发布

编码的三叔

最新推荐文章于 2021-11-09 20:59:46 发布

阅读量319

点赞数

分类专栏： DOM详解 DOM详解文章标签：访问列表框下拉菜单的选项 HTMLSelectElement

本文链接：https://blog.csdn.net/ppwwp/article/details/88357891

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

HTMLSelectElement代表一个列表框或下拉菜单，HTMLSelectElement对象除了可使用普通HTML元素的各个属性和方法外，还支持如下额外的属性。

form:返回列表框、下拉菜单所在的表单对象。只读属性。
length:返回列表框、下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变。只读属性
options:返回列表框、下拉菜单里所有选项组成的数组。只读属性
selectedIndex:返回下拉列表中选中选项的索引，如果有多个选项被选中，则只返回第一个被选中选项的索引。读写属性。
type:返回下拉列表的类型，即是否允许多选。如果允许多选，则返回select-multiple；如果不支持多选，则返回select-one。

HTMLSelectElement的options属性可直接访问列表框、下拉菜单的所有列表项，传入指定索引即可访问指定列表项，语法格式如下：

select.options[index]：返回列表框、下拉菜单的第index+1个选项。列表框、下拉菜单的选项有HTMLOptionElement对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。
form:返回包含该选项所处列表框、下拉菜单的表单对象。
defaultSelected:返回该选项默认是否被选中。只读属性。
index:返回该选项在列表框、下拉菜单中的索引。只读属性。当然也可以通过增加或删除列表框的选项来改变该选项的索引值。
selected:返回该选项是否被选中，通过修改属性可以动态改变该选项是否被选中。
text:返回该选项呈现的文本，就是<option>和</option>之间的文本。对HTMLOptionElement而言，该属性与innerHTML属性相同。
value:返回每个选项的value属性，可以通过设置该属性来改变选项的value值。

下面的页面代码示范了访问列表框、下拉菜单中列表项的用法。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>访问列表项</title>
		
	</head>
	<body>
		<select id="mySelect" name="mySelect" >
			<option value ="java">java1</option>
			<option value ="ssh">ssh1</option>
			<option value ="ajax">ajax1</option>
			<option value ="xml">xml1</option>
			<option value ="ejb">ejb1</option>
			<option value ="android">android1</option>
		</select><br><br>
		
		<input type="button" name="" id="" value="第一个"  onclick="change(curtarget.options[0]);"/>
		<input type="button" name="" id="" value="上一个"  onclick="change(curtarget.options[curtarget.selectedIndex-1]);"/>
		<input type="button" name="" id="" value="下一个"  onclick="change(curtarget.options[curtarget.selectedIndex+1]);"/>
		<input type="button" name="" id="" value="最后一个"  onclick="change(curtarget.options[curtarget.length-1]);"/>
		
		<script type="text/javascript">
			var curtarget = document.getElementById("mySelect");
			var change = function(target){
				alert(target.text);
			}
		</script>
	</body>
</html>

在这里插入图片描述

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
008-访问列表框、下拉菜单的选项

HTMLSelectElement代表一个列表框或下拉菜单，HTMLSelectElement对象除了可使用普通HTML元素的各个属性和方法外，还支持如下额外的属性。form:返回列表框、下拉菜单所在的表单对象。只读属性。length:返回列表框、下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变。只读属性options:返回列表框、下拉菜单里所有选项组成的数组。只读属性s...
复制链接

扫一扫