Ajax实现省，市，县的三级联动

来源：互联网发布：windows双网卡路由编辑：程序博客网时间：2024/04/30 06:41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
/*
[
{"id":110000,"leaf":false,"name":"北京市","parentId":0},
{"id":120000,"leaf":false,"name":"天津市","parentId":0},
{"id":130000,"leaf":false,"name":"河北省","parentId":0}
...
]
*/
// 不带缓存的实现
$(document).ready(function(){
$.post("/ajaxapp/city.do", {}, function(json){
for(var i = 0; i < json.length; i++) {
$("<option>").val(json[i].id).text(json[i].name).appendTo("#sheng");
}
$("#sheng").change();//主动触发change事件
}, "json");

$("#sheng").change(function(){
$.post("/ajaxapp/city.do", {parentId:$(this).val()}, function(json){
$("#shi").empty();
for(var i = 0; i < json.length; i++) {
$("<option>").val(json[i].id).text(json[i].name).appendTo("#shi");
}
$("#shi").change();
}, "json");
});

$("#shi").change(function(){
$.post("/ajaxapp/city.do", {parentId:$(this).val()}, function(json){
$("#xian").empty();
for(var i = 0; i < json.length; i++) {
$("<option>").val(json[i].id).text(json[i].name).appendTo("#xian");
}
}, "json");
});
});
</script>
</head>

<body>
<select id="sheng"></select>
<select id="shi"></select>
<select id="xian"></select>
</body>
</html>