jQuery之省市二级联动实现

原创于 2018-07-06 11:00:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的省市二级联动下拉菜单示例。通过预定义的省份和对应城市的二维数组，在用户选择省份后，相应的城市选项会动态加载到第二个下拉框中。此方法适用于简单的网页表单。

通过jQuery完成对省市二级联动的实现

<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		//创建二维数组，存储省份和城市	
		var citys = new Array(4);
		citys[0] = new Array("东城区", "西城区", "崇文区", "宣武区", "朝阳区");
		citys[1] = new Array("长沙市", "株洲市", "湘潭市", "岳阳市", "永州市");
		citys[2] = new Array("南京市", "常州市", "徐州市", "无锡市", "苏州市");
		citys[3] = new Array("广州市", "深圳市", "佛山市", "汕头市", "中山市");
		$("#province").change(function() {
			$("#city").empty();
			var cityItem = this.value;
			//遍历二维数组
			$.each(citys, function(i, n) {
				if (cityItem == i) {
					$.each(citys[i], function(a, b) {
						$("#city").append("<option>" + b + "</option>");
					});
				}
			});
		});
	});
</script>