简单的城市联动实现

最新推荐文章于 2022-08-07 15:59:18 发布

forevu

最新推荐文章于 2022-08-07 15:59:18 发布

阅读量234

点赞数

分类专栏：学习阶段文章标签： jQuery实现三级联动

本文链接：https://blog.csdn.net/forevu/article/details/93386178

版权

学习阶段专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery下实现城市的三级联动

其中使用了change()函数；
	当函数的值发生改变时，会发生change事件；
		本例中，当第一个选择框的值发生改变时，触发事件，改变第二个选择框中的内容；依次类推...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市联动</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
	<select><option value="">请选择省</option></select>
	<select><option value="">请选择市</option></select>
	<select><option value="">请选择区</option></select>
</body>
	<script>
		var obj1 = {'云南省':['楚雄州','大理州', '德宏州', '昆明市', '迪庆州', '玉溪市'],
		'贵州省':['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁市', '毕节市'],
		'四川省':['南充市', '宜宾市', '广安市', '达州市', '遂宁市', '乐山市']
	}
		var obj2 = {
			'楚雄州':['楚雄市', '双柏县', '牟定县', '南华县', '姚安县', '大姚县'],
			'大理州':['大理市', '祥云县', '宾川县', '弥渡县', '永平县', '云龙县'],
			'德宏州':['潞西市', '瑞丽市', '梁河县', '盈江县', '陇川县',],
			'昆明市':['盘龙区', '五华区', '官渡区', '西山区', '东川区',],
			'迪庆州':['香格里拉县', '德钦县', '维西县',],
			'玉溪市':['华宁县', '澄江县', '易门县', '通海县', '江川县',],
			'贵阳市':['南明区', '云岩区', '花溪区', '乌当区', '白云区', '小河区', ],
			'六盘水市':['钟山区', '盘县', '水城县', '六枝特区',],
			'遵义市':['红花岗区', '赤水市', '遵义县', '桐梓县', '绥阳县',],
			'安顺市':['西秀区', '平坝县', '普定县',],
			'铜仁市':['铜仁市', '江口县', '石阡县', '思南县', '德江县',],
			'毕节市':['大方县', '黔南县', '金沙县', '纳雍县', '赫章县',],
			'南充市':['顺庆区','高坪区','嘉陵区','阆中市','南部县','山县'],
			'宜宾市':['翠屏区','宜宾县','南溪县','江安县','长宁县','高县','珙县','筠连县'],
			'广安市':['广安区','华蓥市','岳池县','武胜县','水县'],
			'达州市':['通川区','万源市','达县','宣汉县','开江县','大竹县'],
			'遂宁市':['船山区','安居区','蓬溪县','射洪县','英县 '],
			'乐山市':['市中区','沙湾区','五通桥','金口河','峨眉山','犍为县','井研县','江县'],
		}
		var str = '<option value="">请选择省</option>'
		for(var i in obj1){
			str += '<option value="'+i+'">'+i+'</option>'
		}
		$('select').eq(0).html(str)
		$('select').eq(0).change(function(){
			var val = $(this).val()
			var arr = obj1[val]
			var str = '<option value="">请选择市</option>'
			for(var i in arr){
				str += '<option value="'+arr[i]+'">'+arr[i]+'</option>'
			}
			$('select').eq(1).html(str)
		})
			$('select').eq(1).change(function(){
				var val = $(this).val()
				var arr = obj2[val]
				var str = '<option value="">请选择区</option>'
				for(var i in arr){
					str += '<option value="'+arr[i]+'">'+arr[i]+'</option>'
				}
				$('select').eq(2).html(str)
			
		})
	</script>
</html>

城市的三级联动，或者多级联动的实现，重点是change()函数的使用。
一个值改变触发change事件，发生连续的事件。

forevu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的城市联动实现

jQuery下实现城市的三级联动其中使用了change()函数；当函数的值发生改变时，会发生change事件；本例中，当第一个选择框的值发生改变时，触发事件，改变第二个选择框中的内容；依次类推...<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫