省市县的三级联动

最新推荐文章于 2022-10-23 23:19:09 发布

old_Rain_321

最新推荐文章于 2022-10-23 23:19:09 发布

阅读量640

点赞数

本文链接：https://blog.csdn.net/wangraina/article/details/80780600

版权

页面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>  
 

2.页面效果

点击省的图片

点击市

点击县

old_Rain_321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省市县的三级联动

页面jsp ajax请求&lt;script type="text/javascript"&gt; $(function (){ $.post( "sheng.action", function(obj){ for (var i = 0; i &lt; obj.length; i++) { ...
复制链接

扫一扫