城市联动选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/wxzyzydd/article/details/69487475

<!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">
<title>城市联动</title>
<script src="js/jquery-1.11.3.js"></script>
<style type="text/css">
select {
	width: 14em;
	height: 3.2em;
	padding: 0.2em 0.4em 0.2em 0.4em;
	vertical-align: middle;
	border: 1px solid #e9e9e9;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	border-radius: 0.2em;
	box-shadow: inset 0 0 3px #a0a0a0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* sample image from the webinfocentral.com */
	font-family: Arial, Calibri, Tahoma, Verdana;
	font-size: 1.1em;
	color: #000099;
	cursor: pointer;
}

select  option {
	font-size: 1em;
	padding: 0.2em 0.4em 0.2em 0.4em;
}
</style>
</head>
<body>
	省份：
	<select id="province"></select> 城市：
	<select id="city"></select> 区：
	<select id="area"></select> 街道：
	<select id="road"></select>
</body>
<script type="text/javascript">
	function change(id, target) {
		//alert(target);
		$.ajax({
			url : "cs",
			type : "GET",
			dataType : "json",
			data : {
				"id" : id
			},
			success : function(list) {
				target.html("");
				$(list).each(
						function() {
							target.append($("<option value="+this.id+">"
									+ this.name + "</option>"));
						});
			},
			async : false
		})
	}
</script>
<script type="text/javascript">
$(function(){
	change("0", $("#province"));
	change("1", $("#city"));
	change("37", $("#area"));
	//change("567", $("#road"));
	
	$("#province").change(function(){
		change($(this).val(),$("#city"));
		 $("#city").trigger("change");
		});
	
	
	$("#city").change(function(){
		change($(this).val(),$("#area"));
		 $("#area").trigger("change");
		});
	
	$("#area").change(function(){
		change($(this).val(),$("#road"));
		});
	
	
})

</script>
</html>

运用trigger方法触发change事件