jquery json实现省市级级联

java后台程序：

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.tugou.bean.TBAreaBean;
import com.tugou.controller.BaseController;
import com.tugou.service.AreaService;
import com.tugou.util.StringUtil;

import net.sf.json.JSONObject;

/**
* （省、市、区（县））维护Controller
* @author zhangh
*
*/
@Controller
@RequestMapping("/area")
public class AreaController extends BaseController{

private static final Logger logger = Logger.getLogger(AreaController.class);

@Autowired
private AreaService<TBAreaBean> areaService;

/**
* 查询所有省、市、区
* @param request
* @return
*/
@RequestMapping(value = "queryAreaList", method={RequestMethod.GET,RequestMethod.POST},produces = "text/html;charset=UTF-8")
@ResponseBody
public String queryAreaList(HttpSession session,HttpServletRequest request){
try{
Map<String,Object> map = new HashMap<String,Object>();
String id = request.getParameter("id");
Integer iId = StringUtil.isNullOrBlank(id)?null:Integer.parseInt(id);
map.put("id", iId);
List<TBAreaBean> areatList = areaService.getAreaList(map);

JSONObject jsonObj = new JSONObject();
jsonObj.put("areaList", areatList);

return jsonObj.toString();
}catch(Exception e){
e.printStackTrace();
logger.error("程序错误："+e.getMessage());
return "0";
}
}
}

js程序：

$(function(){
AreaList(1,0);
$("#province_id").change(function(){
var provinceId=$("#province_id option:selected").val();
AreaList(2,provinceId);
$("#city_id").show();
$("#area_id").hide();
})
$("#city_id").change(function(){
var cityId=$("#city_id option:selected").val();
AreaList(3,cityId);
$("#area_id").show();

})
})

/**
* 获取所有的市级联动
*/
function allArea(type,id){
$.ajax({
type:"post",
url:hostpath+'/area/queryAreaList.html',
data:{'id':id},
success:function(data){
var json = eval("(" + data + ")");
if(type==1){
areaList(json,$("#province_id"));
}else if(type==2){
areaList(json,$("#city_id"));
}else if(type==3){
areaList(json,$("#area_id"));
}
}
});
}

function areaList(json,$city){
var province = "<option value=\"\">请选择</option>";
$.each(json.areaList,function(idx,item){
province += "<option value="+item.id+">"+item.name+"</option>";
});

$city.html(province);
}

 

html页面：

<dl class="clearfix">
<dt><span>选择所代理的地区：</span>*</dt>
<dd>
<select id="province_id">
<option value="">请选择</option>
</select>
<select id="city_id" style="display: none;">
<option value="">请选择</option>
</select>
<select id="area_id" style="display: none;">
<option value="">请选择</option>
</select>
</dd>
<dd class="warn"><span>不能为空</span></dd>
</dl>

 

 

 

 

 

 

 

 

 

 

 

省市县sql脚本：https://files.cnblogs.com/files/flywang/tb_area.zip