普通js、js map、jquery 实现二级联动

最新推荐文章于 2022-04-06 21:45:53 发布

城之于域

最新推荐文章于 2022-04-06 21:45:53 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/qphelloworld/article/details/86601380

版权

普通js实现方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级联动</title>
		<style>
			.container{
				width: 900px;
				margin: 0 auto;
			}
		</style>
		
	</head>
	<body>
		<div class="container">
			<select name="" id="city" onchange="change();">
				
			</select>
			<select name="" id="area">
				
			</select>
		</div>
	</body>
	<script>
		var data = {
			'北京':['海淀区','朝阳区','昌平区'],
			'上海':['黄浦区','嘉定区','浦东区'],
			'广州':['天河区','白云区','黄埔区']
		};
		var select1 = document.getElementById("city");//获取select 对象
	
		for (var a in data) { //for in  遍历  遍历出的是json中的键 key
			addOption(select1,a);//创建option标签元素
		}
		//为第二个select下拉框赋初始值
		var select2 = document.getElementById("area");
		var option1 = data['北京'];
//		for(var i=0;i<option1.length;i++){
//			addOption(select2,option1[i]);
//		}

		for (var value of option1) {
			addOption(select2,value);
		}
		
		function change(){	//选择不同的城市对应不同的区
			//var select2 = document.getElementById('area');//获取区的select下拉框
			select2.innerHTML = "";						//应该把之前的select里面的option清空  否则会重复添加  
			var cityVal = select1.value;				//获取城市的下拉框的值
			var option2 = data[cityVal];				//cityVal 当做json中的键 获取json中的值
			for (var value of option2) {  				//for in 也是遍历 但是它只遍历数组的值 并不去关注属性
				addOption(select2,value);				//创建option标签元素
			}
		}
		//把往select添加option抽取成一个函数
		function addOption(obj,val){
			var option3 = document.createElement("option");  //创建 option标签元素
			option3.value = val;          //设置option的value属性值  为传进来的值
			option3.innerText = val;	//设置option中的文本值
			obj.appendChild(option3); 	 //把option标签元素  添加到select下拉框中
		}
	</script>
</html>

js--map实现方法:

        var map = new Map(
			[['北京',['海淀区','朝阳区','昌平区']],
			['上海',['黄浦区','嘉定区','浦东区']],
			['广州',['天河区','白云区','黄埔区']]]
		);
		//获取第一个city下拉框的对象 
		var city = document.getElementById('city');
		//遍历map  给第一个下拉框赋值
		map.forEach(function(value,key,map){
			addOption(city,key);
		});
		//给第二个下拉框赋值
		var area1 = document.getElementById('area');
		map.get('北京').forEach(function(element,index,array){  //这里会获取到一个数组
			addOption(area1,element);					//   数组调用 forEach(function(element,index,array){});
		});												
		//change()改变第二个select下拉框的值
		function change(){
			//第一件是就是先把第二个下拉框中的 innerHTML 清空
			area1.innerHTML = "";
			//获取第一个下拉框的值
			var cityVal = city.value;
			//其实这个值 就是map中对应的key 获取对应的值 就是一个数组 
			map.get(cityVal).forEach(function(element){
				addOption(area1,element);
			});
		};
		//抽取方法 往select下拉框中添加option
		function addOption(obj,val){
			var option3 = document.createElement('option');
			option3.value = val;
			option3.innerText = val;
			obj.appendChild(option3);
		};

jquery实现方法：

            var data = {
				'北京':['海淀区','朝阳区','昌平区'],
				'上海':['黄浦区','嘉定区','浦东区'],
				'广州':['天河区','白云区','黄埔区']
			};
			//为第一个下拉框赋初值  
			$.each(data, function(key,value) {
				addOption($("#city"),key);
			});
			$.each(data['北京'], function(key,value) {
				addOption($("#area"),value);
			});
			function change(){
				//清空 下拉框
				$("#area").empty();
				$.each(data[$("#city").val()], function(key,value) {
					addOption($("#area"),value);
				});
			}
			function addOption(obj,value){
				obj.append("<option value='"+value+"'>"+value+"</option>");
			}