码云前端 2018-10-12

js通过另外一个下拉菜单已选选项来修改当前下拉菜单的选项

AI 概述

Select 对象Select 对象集合Select 对象属性disabled 属性form 属性length 属性multiple 属性name 属性selectedIndex 属性size 属性type 属性浏览器支持Select 对象方法add() 方法浏览器支持remove() 方法浏览器支持如何通过 js 将另外一个下拉菜单已选选项来修改当前下拉菜单的选项，这个效果我们在...

文章目录隐藏

Select 对象
Select 对象集合
Select 对象属性

disabled 属性
form 属性
length 属性
multiple 属性
name 属性
selectedIndex 属性
size 属性
type 属性
浏览器支持

Select 对象方法

add() 方法
浏览器支持
remove() 方法
浏览器支持

如何通过 js 将另外一个下拉菜单已选选项来修改当前下拉菜单的选项，这个效果我们在项目中经常见到，今天为大家整理下来提供学习，这里需要用到一些 select 对象的知识，先看一下效果图，再补充相关知识，最后将源码附上。

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。

可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象集合

options 返回包含下拉列表中的所有选项的一个数组。

Select 对象属性

disabled 属性

可设置或返回是否金融下拉列表。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。

语法

设置 disabled 属性：

element.disabled=true|false

返回 disabled 属性：

element.disabled

form 属性

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

该属性返回 form 对象。

语法

selectObject.form

length 属性

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

语法

selectObject.length=number

multiple 属性

multiple 属性可设置或返回是否可有多个选项被选中。

语法

设置 multiple 属性：

selectObject.multiple=true|false

返回 multiple 属性：

selectObject.multiple

name 属性

name 属性可设置或返回下拉列表的名称。

语法

设置 name 属性：

selectObject.name=name

返回 name 属性：

selectObject.name

selectedIndex 属性

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

注意：若允许多重选择，则仅会返回第一个被选选项的索引号。

语法

设置 selectedIndex 属性：

selectObject.selectedIndex=integer

返回 selectedIndex 属性：

selectObject.selectedIndex

size 属性

size 属性可设置或返回下拉列表中一次显示显示的选项数。

语法

设置 size 属性：

selectObject.size=integer

返回 size 属性：

selectObject.size

type 属性

type 属性可返回下拉列表的表单类型。对于下拉列表，类型总是 “select-one” 或 “select-multiple”。

语法

selectObject.type

浏览器支持

以上 select 对象属性所有主流浏览器都支持

Select 对象方法

add() 方法

add() 方法用于向 <select> 添加一个 <option> 元素。

语法

selectObject.add(option,before)

参数	描述
option	必需。要添加选项元素。必需是 option 或 optgroup 元素。
before	必需。在选项数组的该元素之前增加新的元素。如果该参数是 null，元素添加到选项数组的末尾。

浏览器支持

所有主要浏览器都支持 add() 方法

提示： add() 方法在 IE8 和更高版本的 IE 中需要在页面声明 !DOCTYPE 。

实例

向下拉列表的末尾添加一个 “kiwi” 选项

HTML 代码：

<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>

JavaScript 代码：

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);
	}
}

remove() 方法

remove() 方法用于从下拉列表删除选项。

语法

selectObject.remove(index)

参数	描述
index	必需。规定要删除的选项的索引号。

浏览器支持

所有主要浏览器都支持 remove() 方法

实例

从列表中删除被选的选项：

HTML 代码：

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

JavaScript 代码：

function removeOption(){
    var x=document.getElementById("mySelect");
    x.remove(x.selectedIndex);
}

以上补充知识完毕，接下来看我们今天主要内容实现方法

首先，HTML 放入两个 select，一个是选中的，另一个是更具选中的 option 展示的 select

<select id="car" onchange="ChangeCarList();"> 
	<option value="">-- Car --</option> 
	<option value="VO">Volvo</option> 
	<option value="VW">Volkswagen</option> 
	<option value="BMW">BMW</option> 
</select> 
<select id="carmodel"></select>

然后，我们在 JavaScript 中定义一个对象用来存放这些需要的数据值

var carsAndModels={};
carsAndModels['VO']=['V70','XC60','XC90'];
carsAndModels['VW']=['Golf','Polo','Scirocco','Touareg'];
carsAndModels['BMW']=['M6','X5','Z3'];

最后，定义 ChangeCarList()方法来做具体操作

function ChangeCarList(){
	var carList=document.getElementById("car");
	var modelList=document.getElementById("carmodel");
	var selCar=carList.options[carList.selectedIndex].value;
	while (modelList.options.length){
		modelList.remove(0);
	}
	var cars=carsAndModels[selCar];
	if (cars){
		for (var i=0;i<cars.length;i++){
			var car=new Option(cars[i],i);
			modelList.options.add(car);
		}
	}
}

以上就是全部实现方法，完整代码附上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>码云笔记(mybj123.com)</title>	
<script>
var carsAndModels={};
carsAndModels['VO']=['V70','XC60','XC90'];
carsAndModels['VW']=['Golf','Polo','Scirocco','Touareg'];
carsAndModels['BMW']=['M6','X5','Z3'];
function ChangeCarList(){
	var carList=document.getElementById("car");
	var modelList=document.getElementById("carmodel");
	var selCar=carList.options[carList.selectedIndex].value;
	while (modelList.options.length){
		modelList.remove(0);
	}
	var cars=carsAndModels[selCar];
	if (cars){
		for (var i=0;i<cars.length;i++){
			var car=new Option(cars[i],i);
			modelList.options.add(car);
		}
	}
} 
</script>
</head>
<body onload="ChangeCarList();">   

<select id="car" onchange="ChangeCarList();"> 
	<option value="">-- Car --</option> 
	<option value="VO">Volvo</option> 
	<option value="VW">Volkswagen</option> 
	<option value="BMW">BMW</option> 
</select> 
<select id="carmodel"></select> 

</body>
</html>

以上关于js通过另外一个下拉菜单已选选项来修改当前下拉菜单的选项的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 4 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » js通过另外一个下拉菜单已选选项来修改当前下拉菜单的选项