JS和jQuery分别实现二级联动下拉选择

32224047_yw

于 2020-06-08 18:53:02 发布

阅读量626

点赞数

分类专栏： WEB前端文章标签： java jquery html javascript

本文链接：https://blog.csdn.net/qq_32224047/article/details/106626414

版权

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方式一：通过js实现二级联动下拉框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>


<script>
	var data = {
		"北京市": ["海淀区","朝阳区","丰台区"],
		"河北省": ["石家庄","唐山","秦皇岛"],
		"辽宁省": ["沈阳","大连","鞍山"],
		"山东省": ["青岛","济南","烟台"]
	}
	
	/* --通过js实现二级联动下拉框-- */
	//当选项切换时, 触发onchange事件, 执行getCountry函数, 在函数中获取当前选中的国家并弹出!
	function getCountry(thisobj){
		alert(thisobj.value);
	}
	
	//二级联动下拉框
	function selectCity(thisobj){
		//1.获取用户选中的省份
		var prov = thisobj.value;//thisobj-->省份的select
		//2.根据省份获取省份对应的城市列表
		var citys = data[prov];

		//3.将省份对应的所有城市作为option选项依次填充到城市select中
		//>>获取城市select
		var oCitySele = document.getElementById("city");

        //在填充城市列表数据之前, 先清空之前的数据
		//清理内容方式一
		//oCitySele.innerHTML = "<option>--选择城市--</option>";

		var opts = oCitySele.getElementsByTagName("option");
		//清理内容方式二
		//>>循环遍历option, (删除第一个以外的所有option)
		//0 号位为选中提示，所以从1号位开始删除，每次删除后数组都会向前移动，所以
		//遍历删除所有的一号位置就行
		var len = opts.length;//4 3
		for(var i=1; i<len;i++){
			//alert(opts[1].value);
			oCitySele.removeChild(opts[1]);
		}

		for(var i=0; i<citys.length; i++){
			var opt = document.createElement("option");
			opt.innerHTML = citys[i];
			oCitySele.appendChild(opt);
		}
	}
	
</script>
<!-- 
js实现注意问题: 
	ie10以下的浏览器不支持 select,table上的innerHTML属性
	删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题
-->
</head>

<body>
	
	<select name="country" onchange="getCountry(this)"  >
		<option value="none">--选择国家--</option>
		<option value="中国">中国</option>
		<option value="美国">美国</option>
		<option value="日本">日本</option>
	</select>
	<br><br>
	<hr/>
	<br>
	<div id="seleDiv">
		<select id="province" onchange="selectCity(this)">
			<option>--选择省市--</option>
			<option>北京市</option>
			<option>河北省</option>
			<option>辽宁省</option>
			<option>山东省</option>
		</select>
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</div>
</body>

</html>

方式二：通过jQuery实现二级联动下拉框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>

<!--引入jquery库-->
<script src="js/jquery-1.4.2.js"></script>
<script>
	var data = {
		"北京市": ["海淀区","朝阳区","丰台区"],
		"河北省": ["石家庄","唐山","秦皇岛"],
		"辽宁省": ["沈阳","大连","鞍山"],
		"山东省": ["青岛","济南","烟台"]
	}

	//当选项切换时, 触发onchange事件, 执行getCountry函数, 在函数中获取当前选中的国家并弹出!
	function getCountry(thisobj){
		alert(thisobj.value);
	}
	 //通过jQuery实现二级联动下拉框
	function selectCity(thisobj){
		var prov = $(thisobj).val();//获取用户选中的省份
		var citys = data[prov];//再根据省份获取对应的市区
		$("#city").html("<option>--选择城市--</option>");//清空之前的数据
		for(var i=0; i<citys.length; i++){
			$("#city").append("<option>"+[citys[i]]+"</option>");
		}
	}
	
</script>
<!-- 
js实现注意问题: 
	ie10以下的浏览器不支持 select,table上的innerHTML属性
	删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题
-->
</head>

<body>
	
	<select name="country" onchange="getCountry(this)"  >
		<option value="none">--选择国家--</option>
		<option value="中国">中国</option>
		<option value="美国">美国</option>
		<option value="日本">日本</option>
	</select>
	<br><br>
	<hr/>
	<br>
	<div id="seleDiv">
		<select id="province" onchange="selectCity(this)">
			<option>--选择省市--</option>
			<option>北京市</option>
			<option>河北省</option>
			<option>辽宁省</option>
			<option>山东省</option>
		</select>
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</div>
</body>

</html>

32224047_yw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS和jQuery分别实现二级联动下拉选择

方式一：通过js实现二级联动下拉框<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二级联动下拉框</title><script> var data = { "北京市": ["海淀区","朝阳区","丰台区"], "河北省": ["石家庄",
复制链接

扫一扫

专栏目录