手记

关于ajax+json+jquery二级联动

通过省的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>

11人推荐
随时随地看视频
慕课网APP