JQ简单的实现省市二级联动

昔我往昔

已于 2025-01-08 16:48:38 修改

阅读量2.4k

点赞数 1

分类专栏：前端文章标签：前端 javascript 开发语言

于 2018-09-29 08:44:49 首次发布

本文链接：https://blog.youkuaiyun.com/hekai7217/article/details/82892317

版权

前端专栏收录该内容

6 篇文章

订阅专栏

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js"></script>
	</head>
	<body>
		选择的省:
		<select id="province"></select>
		选择的市:
		<select id="city"></select>
		<script>
		     /**
		      *  text()、html() 以及 val()  jq 获取参数的操作  js对应的属性是 innerText, innerHtml,value
		      *                           jq 设置参数的值就是 直接赋值    js 用等号赋值 
		      */
		let arr_province = ['浙江省', '广东省', '湖北省', '台湾省'];
			let arr_citys = [
				['杭州市', '温州市', '宁波市', '绍兴市'],
				['深圳市', '湛江市', '广州市', '佛山市'],
				['武汉市', '黄冈市', '鄂州市', '襄阳市'],
				['台北市', '高雄市', '基隆市', '台南市'],
			];

			$(function() {
				//$('#province').get(0).length = arr_province.length;
				$.each(arr_province, function(index, ele) {
					//每次循环一个 省  city 要清理一下
					$('#city').empty(); //直接清空的操作 
					//创建节点
					var textNode = document.createTextNode(ele);
					//7.创建option元素节点
					var opEle = document.createElement("option");
					//8.将城市文本节点添加到option元素节点中去
					$(opEle).append(textNode);
					//<option>arr_province[i]</option>
					$(opEle).appendTo($('#province'));
					console.log(index);
                     // jq对象转成js对象直接操作
					//$('#province').get(0).options[index].text = ele;
					//$('#province').get(0).options[index].value = ele;

					//设置默认的选择位置 
					let postion = 0;
					$('#province').selectedIndex = postion;
					changeCity(postion);
				});
			});

			function changeCity(index) {
				$.each(arr_citys[index], function(i, ele) {
					//创建节点
					var textNode = document.createTextNode(ele);
					//7.创建option元素节点
					var opEle = document.createElement("option");
					//8.将城市文本节点添加到option元素节点中去
					$(opEle).append(textNode);
					//<option>arr_province[i]</option>
					$(opEle).appendTo($('#city'));
				});
			}
			$(function() {
				//监听 改变事件
				$('#province').change(function() {
					$('#city').empty();
					changeCity(this.selectedIndex);
				});
			});
		</script>
	</body>
</html>