JavaScript下拉列表

@-笨笨熊

已于 2023-05-10 08:35:06 修改

阅读量2.7k

点赞数 3

文章标签： javascript servlet 前端

于 2022-09-29 10:49:41 首次发布

本文链接：https://blog.csdn.net/weixin_69420643/article/details/127102713

版权

要求：第二个下拉列表内的内容会根据第一个下拉列表所选择的值变化。

首先完成下拉列表

<select name="province" id="province" >
			<option value="请选择省份">--请选择省份--</option>
			<option value="河南省">--河南省--</option>
			<option value="四川省">--四川省--</option>
		</select>
		<select name="cities" id="cities">
			<option value="请选择城市">--请选择城市--</option>
		</select>

然后根据选择的省来决定第二个下拉列表的内容

<script type="text/javascript">
			function changeOpt(){
				var cityList = new Array();
				cityList['请选择省份'] = ['请选择城市'];
				cityList['河南省'] = ['郑州','开封','洛阳','商丘','焦作']
				cityList['四川省'] = ['成都','绵阳','德阳','自贡','泸州']
				
                //获取选中选项，也就是选中的省
				var province  = document.getElementById("province").value
                //清空第二个下拉列表的值
				document.getElementById("cities").options.length = 0
                //使用for循环将对应的值添加到第二个下拉列表
				for(var i=0;i<cityList[province].length;i++){
					console.log(cityList[province][i])
					var opt = new Option(cityList[province][i],cityList[province][i])
					document.getElementById("cities").options.add(opt)
				}
			}
		</script>

完整代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select name="province" id="province" onchange="changeOpt()">
			<option value="请选择省份">--请选择省份--</option>
			<option value="河南省">--河南省--</option>
			<option value="四川省">--四川省--</option>
		</select>
		<select name="cities" id="cities">
			<option value="请选择城市">--请选择城市--</option>
		</select>
		
		<script type="text/javascript">
			function changeOpt(){
				var cityList = new Array();
				cityList['请选择省份'] = ['请选择城市'];
				cityList['河南省'] = ['郑州','开封','洛阳','商丘','焦作']
				cityList['四川省'] = ['成都','绵阳','德阳','自贡','泸州']
				
                //获取选中选项，也就是选中的省
				var province  = document.getElementById("province").value
                //清空第二个下拉列表的值
				document.getElementById("cities").options.length = 0
                //使用for循环将对应的值添加到第二个下拉列表
				for(var i=0;i<cityList[province].length;i++){
					console.log(cityList[province][i])
					var opt = new Option(cityList[province][i],cityList[province][i])
					document.getElementById("cities").options.add(opt)
				}
			}
		</script>
	</body>
</html>