Select对象

最新推荐文章于 2024-09-10 13:54:44 发布

pinkdown

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量752

点赞数

本文链接：https://blog.csdn.net/weixin_44764207/article/details/102768685

版权

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，标签每出现一次，一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象集合

option 集合可返回包含元素中所有的一个数组。

Select 对象属性

1、disabled 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>		
<body>

<form>
<select id="pets">
    <option>Cats</option>
    <option>Dogs</option>
</select>
</form>
<p>单击下面的按钮禁用下拉列表。</p>
<button onclick="disableElement()">禁用下拉列表</button>
<script>
function disableElement(){
	document.getElementById("pets").disabled=true;
}

</script>
</body>
</html>

2、form 属性可返回对包含该下拉列表的表单元素的引用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("mySelect").form.id;
	alert(x);
}
</script>
</head>
<body>

<form id="form1">
选择你最喜欢的水果:
<select id="mySelect">
	<option>Apple</option>
	<option>Orange</option>
	<option>Pineapple</option>
	<option>Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示所属的表单ID</button>
	
</body>
</html>

3、length 属性可返回下拉列表中选项的数目。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	alert(document.getElementById("mySelect").length);
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<button type="button" onclick="displayResult()">下拉列表中有多少选项?</button>

</body>
</html>

在这里插入图片描述
4、multiple 属性可设置或返回是否可有多个选项被选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	document.getElementById("mySelect").multiple=true;
}
</script>
</head>
<body>

<form>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<button type="button" onclick="displayResult()">允许多个选择</button>
<p>按下Ctrl键来选择多个选项</p>

</body>
</html>

在这里插入图片描述
5、name 属性可设置或返回下拉列表的名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
  alert(document.getElementById("mySelect").name);
}
</script>
</head>
<body>

<form>
<select name="mySelect" id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示下拉列表的名称</button>

</body>
</html>`![在这里插入图片描述](https://img-blog.csdnimg.cn/20191027170208865.png)
6、selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("mySelect").selectedIndex;
	var y=document.getElementById("mySelect").options;
	alert("索引: " + y[x].index + " is " + y[x].text);
}
</script>
</head>
<body>

<form>
选择你最喜欢的水果:
<select id="mySelect">
	<option>Apple</option>
	<option>Orange</option>
	<option>Pineapple</option>
	<option>Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示索引</button>

</body>
</html>

在这里插入图片描述
7、size 属性可设置或返回下拉列表中一次显示显示的选项数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
  document.getElementById("mySelect").size=4;
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<button type="button" onclick="displayResult()">修改大小</button>

</body>
</html>

在这里插入图片描述
8、type 属性可返回下拉列表的表单类型。对于下拉列表，类型总是 “select-one” 或 “select-multiple”。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
  alert(document.getElementById("mySelect").type);
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示下拉列表的类型</button>

</body>
</html>

在这里插入图片描述

Select 对象方法

1、add() 方法用于向添加一个元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("mySelect");
	var option=document.createElement("option");
	option.text="Kiwi";
	try{
		// 对于更早的版本IE8
		x.add(option,x.options[null]);
	}catch (e){
	  	x.add(option,null);
	}
}
</script>
</head>
<body>

<form>
<select id="mySelect">
	<option>Apple</option>
	<option>Pear</option>
	<option>Banana</option>
	<option>Orange</option>
</select>
</form>
<br>
<button type="button" onclick="displayResult()">插入选项</button>
<p><b>注意:</b>add()方法在IE8或更高版本中正常工作,要在页面中添加一个!DOCTYPE声明。对于IE 8之前的版本还要注意额外的代码。</p>


</body>
</html>

在这里插入图片描述
2、remove() 方法用于从下拉列表删除选项。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function removeOption(){
	var x=document.getElementById("mySelect");
	x.remove(x.selectedIndex);
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="removeOption()" value="移除选项">
</form>

</body>
</html>