简单易懂的城市三级联动，及其回显

qq_34389395 2017-07-06 10:46:26

$(function(){
var $s_province =$("#s_province")
var $s_city =$("#s_city")
var $s_county =$("#s_county")
$s_province.html("<option value='-1000'>省份</option>");
$s_city.html("<option value='-1000'>地级市</option>");
$s_county.html("<option value='-1000'>市、县级市</option>");

var value = $s_county.data('value');
var $s_county_id,$s_city_id,$s_province_id;
if(value != "" && value != undefined){
$.get(base+"/admin/json/area/getAreaByid?area_id="+value,function(data){
$s_province_id = data.s_province.area_id;
$s_city_id = data.s_city.area_id;
$s_county_id = data.s_county.area_id;
});
}
$.get(base+"/admin/json/area/getArea",function(data){
for (var i = 0; i < data.length; i++) {
if($s_province_id==data[i].area_id){
$s_province.append("<option value='"+data[i].area_id+"' selected=''selected>"+data[i].area_name+"</option>");
$s_province.change();
}else{
$s_province.append("<option value='"+data[i].area_id+"'>"+data[i].area_name+"</option>");
}
}
});
$s_province.on('change',function(){
$s_city.html("");
if($(this).val()=="-1000"){
$s_city.html("<option value='-1000'>地级市</option>");
$s_county.html("<option value='-1000'>市、县级市</option>");
}
$.get(base+"/admin/json/area/getArea?area_id="+$(this).val(),function(data){
for (var i = 0; i < data.length; i++) {
if($s_city_id==data[i].area_id){
$s_city.append("<option value='"+data[i].area_id+"' selected=''selected>"+data[i].area_name+"</option>");
$s_city.change();
}else{
$s_city.append("<option value='"+data[i].area_id+"'>"+data[i].area_name+"</option>");
}
}
if($s_city.find("option:selected").val()!="-1000"){
$s_city.change();
}
});
});
$s_city.on('change',function(){
$s_county.html("");
if($(this).val()=="-1000"){
$s_county.html("<option value='-1000'>市、县级市</option>");
}
$.get(base+"/admin/json/area/getArea?area_id="+$(this).val(),function(data){
for (var i = 0; i < data.length; i++) {
if($s_county_id==data[i].area_id){
$s_county.append("<option value='"+data[i].area_id+"' selected=''selected>"+data[i].area_name+"</option>");
}else{
$s_county.append("<option value='"+data[i].area_id+"'>"+data[i].area_name+"</option>");
}
}
});
});
})

<html>
<select id="s_province" style="width:100px;"></select>
<select id="s_city" style="width: 100px;"></select>
<select id="s_county" name="city" style="width: 120px;" data-value="${users.city }"></select>
</html>

后端接口

public View getArea(Integer area_id) throws ActiveRecordException{

if(area_id ==null){
area_id = 0;
}
List<AreaInfo> areas = AreaInfo.find(AreaInfo.class,"parent_area_id = ? and area_status = 1",new Object[]{area_id});
return new JsonView(areas);
}

public View getAreaByid(Integer area_id) throws ActiveRecordException{
//三级级
AreaInfo areaInfo = AreaInfo.get(AreaInfo.class, area_id);
if(areaInfo == null){
return new JsonView("");
}
//二级
AreaInfo two = AreaInfo.first(AreaInfo.class, "area_id = ?", new Object[]{areaInfo.getParent_area_id()});
//一级
if(two == null){
return new JsonView("");
}
AreaInfo three = AreaInfo.first(AreaInfo.class, "area_id = ?", new Object[]{two.getParent_area_id()});
Map<String,Object> map = new HashMap<>();
map.put("s_province", three);
map.put("s_city", two);
map.put("s_county", areaInfo);
return new JsonView(map);
}

...全文