省市县的三级联动

最新推荐文章于 2020-09-09 10:20:56 发布

原创最新推荐文章于 2020-09-09 10:20:56 发布 · 695 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个使用JSP和Ajax实现的三级联动选择器案例。通过省、市、县的级联选择来展示如何动态更新下拉选项。文章详细介绍了如何使用jQuery发起Ajax请求并根据返回的JSON数据动态填充下拉菜单。

页面jsp ajax请求

<script type="text/javascript">
$(function (){
$.post(
"sheng.action",
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#sheng").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
$("#sheng").change(function(){
$("#shi").empty();//当省发生改变把以前市区的数据清空
$("#shi").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
$("#xian").empty();//一起把以前县的数据清空
$("#xian").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
var pid=$("#sheng").val();
if(pid!=0){
$.post(
"sheng.action",
{pid:pid},
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#shi").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
}
})
$("#shi").change(function(){
$("#xian").empty();//当市区发生该变把以前县的数据清空
$("#xian").append($("<option value='0'> 请选择</option>"));
var pid=$("#shi").val();
$.post(
"sheng.action",
{pid:pid},
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#xian").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
})
})
</script>

<body>  
    <h1>三级联动</h1>  
    <select id="sheng">  
        <option value="0">请选择</option>  
    </select>  
    <select id="shi">  
        <option value="0">请选择</option>  
    </select>  
    <select id="xian">  
        <option value="0">请选择</option>  
    </select>  
</body>  