js,jquery实现省市联动

最新推荐文章于 2024-07-21 02:56:05 发布

有趣的杰克

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量360

点赞数

本文链接：https://blog.csdn.net/weixin_42731928/article/details/85161995

版权

最近学习js和jquery,做了这个小功能，感觉比较实用。
主要知识点是一些js和jquery常用的函数和对dom的操作。

<!DOCTYPE html>
<html>
//原生js实现
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//定义一个城市二维数组
			var provinces = [
				["深圳市", "东莞市", "惠州市", "广州市"],
				["长沙市", "岳阳市", "株洲市", "湘潭市"],
				["厦门市", "福州市", "漳州市", "泉州市"]
			];
			
			
			//先判断选的是第几个名字，获取相应的数组，将数组遍历关联到列表框上
			function bian() {
				//获取第一个下拉列表框选中option的值
				var a = document.getElementById("sheng").value;
				//根据取到的值选择数组
				var city = provinces[a];
				//获取市的下拉列表框
				var sel = document.getElementById("shi");
				//清空市列表框的options
				//如果不清空列表框的options，第二个下拉列表框会一直在原来的基础上加
				sel.options.length = 0;
				for(var i = 0; i < city.length; i++) {
					//获取城市元素
					var cityText = city[i];
					//创建option节点
					var option1 = document.createElement("option"); // <option></option>
					//创建城市文本节点
					var textNode = document.createTextNode(cityText); // 东莞市
					//将option节点和文本内容关联起来
					option1.appendChild(textNode); //<option>东莞市</option>
					//添加到城市select中，在select后追加一个option
					sel.appendChild(option1);

				}
			}
		</script>
	</head>

	<body>
		<select name="" id="sheng" onchange="bian()">
			<option value="-1">请选择</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<select id="shi"></select>
	</body>

</html>

<!DOCTYPE html>
<html>
//jquery实现
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	引入jquery文件
        -->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//初始化城市数组
			var a = [
				["深圳市", "东莞市", "惠州市", "广州市"],
				["长沙市", "岳阳市", "株洲市", "湘潭市"],
				["厦门市", "福州市", "漳州市", "泉州市"]
			];

			$(function() {
				//定义SELECT改变的监听函数
				//change函数当用于 select 元素时，change 事件会在选择某个选项时发生
				$("#app").change(function() {
					//取出对应的城市数组
					//this指向$("#app")
					//也可以理解为var c = a[$("#app").val()];
					var c = a[this.value];
					//清空下拉列表框的值
					$("#app1").empty();
					//取数组的值,each函数遍历数组，i为索引，n为值
					$(c).each(function(i, n) {
						//添加到下拉列表框app里
						$("#app1").append("<option>" + n + "</option>")
					})
				})

			})
		</script>
	</head>

	<body>
		<select id="app">
			<option value="-1">请选择</option>
			<option value="0">吴超</option>
			<option value="1">好好</option>
			<option value="2">学习</option>
		</select>
		<select id="app1">

		</select>
	</body>

</html>