省市地区三级目录例子

前端

<table>
<tr>
			<td>产地</td>
			<td>
				<select name="sheng">
					<option>---请选择---</option>
				</select>省
				<select name="shi">
					<option>---请选择---</option>
				</select>市
				<select name="xian">
					<option>---请选择---</option>
				</select>县
			</td>
		</tr>
		</table>

事件js代码

$(function(){
// 进入页面加载省份信息
	$.post("city", function(data){
		$(data).each(function(idx, obj){
			$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=sheng]"));
		});		
	}, "json");
	
	
	// 改变省份时，改变市
	$("[name=sheng]").change(function(){

		var val = $("[name=sheng]").val();
		// 清空之前的市
		$("[name=shi]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=shi]"));
		
		// 清空之前的市
		$("[name=xian]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
		
		$.post("city", {data: val}, function(data){
			$(data).each(function(idx, obj){
				$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=shi]"));
			});		
		}, "json");
	});
	
	// 改变市时，改变县
	$("[name=shi]").change(function(){

		var val = $("[name=shi]").val();
		// 清空之前的市
		$("[name=xian]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
		
		$.post("city", {data: val}, function(data){
			$(data).each(function(idx, obj){
				$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=xian]"));
			});		
		}, "json");
	});
	
});