二级联动

最新推荐文章于 2024-07-28 19:41:52 发布

jq1223

最新推荐文章于 2024-07-28 19:41:52 发布

阅读量73

点赞数

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/jq1223/article/details/112727251

版权

java 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
	请选择省份：
	<select onchange="sheng(this)">
		<option>河南</option>
		<option>山东</option>
		<option>山西</option>
	</select>
	请选择城市：
	<select id="city">
		<option>郑州市</option>
		<option>洛阳市</option>
		<option>开封市</option>
	</select>

 </body>
	<script type="text/javascript">
		
		function sheng(obj){
			//定义一个二维数组,每个一位数组中的数据根据下标和省份的下拉相对应
			//二维数组中的数据是我们特意这样写的，不能乱写
			var areaArr = [
							["郑州市","洛阳市","开封市"],
							["白金市","青岛市","李县","曹市"],
							["太原市","运城市","临汾市","大同市"]
							];
			//获取省份的下拉
			//获取省份中，被选中的下标
			var index = obj.selectedIndex;
			//根据被选中的下标，找到对应的城市数据		["太原市","运城市","临汾市","大同市"]
			var arr = areaArr[index];
			//获取城市的下拉框	
			var city = document.getElementById("city");
			//将城市下拉中的所有选项全部删除
			for(var i = city.options.length - 1; i >= 0; i--){
				city.remove(i);
			}
			//删除成功之后，将需要填充的值加进去
			for(var i = 0; i < arr.length; i++){
				city.add(new Option(arr[i]));
			}
		}

	</script>

</html>

jq1223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author"
复制链接

扫一扫