[转帖]jQuery实现省市联动

最新推荐文章于 2024-11-08 11:17:16 发布

bliss10000

最新推荐文章于 2024-11-08 11:17:16 发布

阅读量104

点赞数

分类专栏： jQuery 文章标签： jQuery json ITeye HTML J# ViewUI

本文链接：https://blog.csdn.net/bliss10000/article/details/83889266

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[quote]一个很好用的jquery城市级联[url=http://yjck.iteye.com/blog/748100]jQuery实现省市联动[/url]
[/quote]


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>省市联动</title>
</head>
<body>
<select id="province">
 	<option>请选择省份</option>
</select>
<select id="city">
	<option>请选择城市</option>
</select>
<script type="text/javascript">
	jQuery(document).ready(function(){
		//加载省信息
		jQuery.post(
		"json/json-array-of-province.json",
		function(data_p){
			for(var i=0;i<data_p.province.length;i++){
				jQuery("#province").append('<option value='+data_p.province[i].code+'>'+data_p.province[i].name+'</option>');
			}
		},
		"json"
		);
		//当省改变的时候加载城市信息
		jQuery("#province").change(function(){
			jQuery("#city").html("");
			jQuery.post(
			"json/json-array-of-city.json",
			function(data_c){
				for(var j=0;j<data_c.city.length;j++){
					var provinceNum = jQuery("#province").val();
					if (provinceNum.substring(0, 2) == data_c.city[j].code.substring(0, 2)){
						jQuery("#city").append('<option value='+data_c.city[j].code+'>'+data_c.city[j].name+'</option>');
					}

				}
			},
			"json"
			);
		});
	}
	);
</script>
</body>
</html>