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

最新推荐文章于 2021-05-16 09:44:41 发布

昔我往昔

最新推荐文章于 2021-05-16 09:44:41 发布

阅读量2.4k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/hekai7217/article/details/82892317

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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>