1.后台查询所有省份信息返回省份的list集合:
Map<String, Object> map = new HashMap<String, Object>();
String jb = "1";
//查询省会
List<AreaDaBean> proviceList = areaService.queryAreaByJb(jb);
map.put("proviceList", proviceList);
2.根据省份编码ajax加载省份下的城市信息,返回json数据:
Area areaInfo = new Area();
areaInfo.setRegionNum(regionNum);
List<Area> arealist = areaService1.selectList_Num(areaInfo);
result.setRetObj(JSONArray.toJSONString(arealist));
3.根据城市编码获取乡镇信息,返回json数据:
Area areaInfo = new Area();
areaInfo.setRegionNum(regionNum);
List<Area> arealist = areaService1.selectList_Num2(areaInfo);
result.setRetObj(JSONArray.toJSONString(arealist));
4.页面遍历显示:每次选择之前清除之前的数据:
var proviceList = ret.retObj.proviceList;
if (proviceList)
{
var optionStr = "<option value=''>--请选择--</option>";
for (var j = 0; j < proviceList.length; j++)
{
optionStr += "<option value='"+ proviceList[j].regionNum + "'>" + proviceList[j].regionName + "</option>";
}
$("#proviceNum").html(optionStr);
}
//------城市--------------
/**
* 根据选择的省份编码查询身份下市级信息
*/
$('#proviceNum').change(function(){
var sel_value = $(this).val() //得到当前选中的值
var sel_reg_num =sel_value.substr(0,2);
$.ajax({
url: **** + '***/***.json',
data:{"regionNum":sel_reg_num},
type:'post',
cache:false,
dataType:'json',
success: function (ret) {
if(ret){
if(ret.retCode == '0'){
var jsonArr = eval("(" + ret.retObj + ")");
var city = '';
city = '<option value="" >请选择</option>';
$(jsonArr).each(function(i){
city += '<option value="'+this.regionNum+'" >'+this.regionName+'</option>';
});
$("#cityNum").html(city);
//把区县下拉框置为空
$("#countyNum").html('<option value="">请选择</option>');
}else{
}
}
}
});
});
//------------乡镇信息---------
/**
* 根据选择的市查询县区信息
*/
$("#cityNum").change(function(){
var sel_value = $(this).val() //得到当前选中的值
var sel_reg_num =sel_value.substr(0,4);
$.ajax({
url: ****.json',
data:{"regionNum":sel_reg_num},
type:'post',
cache:false,
dataType:'json',
success: function (ret) {
if(ret){
if(ret.retCode == '0'){
var jsonArr = eval("(" + ret.retObj + ")");
var city = '';
city = '<option value="" >请选择</option>';
$(jsonArr).each(function(i){
city += '<option value="'+this.regionNum+'" >'+this.regionName+'</option>';
});
$("#countyNum").html(city);
}else{
}
}
}
});
});