继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于ajax+json+jquery二级联动

好奇的小猪
关注TA
已关注
手记 1
粉丝 1
获赞 44

通过省的id去查询市和学校
核心代码:
<script>
$(document).ready(function(){
$.ajax({
url :'http://localhost:8080/fullstack/api/signUp/plist ',
type : "get",
async:true,
dataType : 'json', //以json的形式返回,易解析 "json",
success: function(plist){
$("#select_province").empty();// jq写法 清楚地区下拉框的所有内容,然后拼接上从后台取出来的数据
$("<option value=''>请选择</option>").appendTo("#select_province");
for(var i=0;i<plist.length;i++){//获取plist里面的数据,拼接到select上
$("#select_province").append("<option value='"+plist[i].id+"'>"+plist[i].province_name+"</option>");
}
},
});
$("#select_province").change(function(){
var id={"id":$("#select_province").val()};
$.ajax({
url : 'http://localhost:8080/fullstack/api/signUp/clist',
type:'get',
data:id,
dataType:'json',
async:true,
success:function(clist){
$("#select_city").empty();// jq写法 清楚地区下拉框的所有内容,然后拼接上从后台取出来的数据
$("<option value=''>请选择</option>").appendTo("#select_city");
for(var i=0;i<clist.length;i++){//获取clist里面的数据,拼接到select上
$("#select_city").append("<option value='"+clist[i].city_name+"'>"+clist[i].city_name+"</option>");
}
},
});
$.ajax({
url:'http://localhost:8080/fullstack/api/signUp/slist',
data:id,
type:'get',
dataType:'json',
async:true,
success:function(slist){
$("#select_school").empty();//清除下拉列表的内容
$("<option value=''>请选择</option>").appendTo("#select_school");
for(var i=0;i<slist.length;i++){
$("#select_school").append("<option value='"+slist[i].school_name+"'>"+slist[i].school_name+"</option>");
}
},
});
});
});
</script>

打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP