JS+AJAX實現省市區的下拉列表聯動
本文實例為大傢分享瞭JS+AJAX實現省市區下拉列表聯動的具體代碼，供大傢參考，具體內容如下
效果圖如下，DB中存取的數據來抽取.
前臺JSP頁面的實現
<div class="info">
<div class="title">企業地址:</div>
<div class="value">
<fieldset disabled>
<select id="provinceSelect" class="form-control" data-val="${factoryCenterInfo.province}" οnchange="provinceChange()">
<c:forEach items="${factoryPlace.provinceList}" var="province" varStatus="status">
<option value="${province.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.province == province.key}">selected</c:if></span><span style="color:#3366ff;">></span>${province.value}</option>
</c:forEach>
</select>
</fieldset>
<fieldset disabled>
<select id="citySelect" class="form-control" data-val="${factoryCenterInfo.city}" οnchange="cityChange()">
<c:forEach items="${factoryPlace.cityList}" var="city" varStatus="status">
<option value="${city.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.city == city.key}">selected</c:if></span>>${city.value}</option>
</c:forEach>
</select>
</fieldset>
<fieldset disabled>
<select id="areaSelect" class="form-control" data-val="${factoryCenterInfo.area}">
<c:forEach items="${factoryPlace.areaList}" var="area" varStatus="status">
<option value="${area.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.area == area.key}">selected</c:if></span>>${area.value}</option>
</c:forEach>
</select>
</fieldset>
</div>
</div>
JS實現代碼
效果：實現多次ajax請求，聯動搜索數據
function provinceChange(){
var provinceId = $("#provinceSelect").val();
$("#citySelect").empty();
$("#areaSelect").empty();
if(provinceId != null && provinceId != ""){
$.ajax({
type: "POST",
url:"<span style="color:#3333ff;">factory/getChangeList</span>",
dataType:'json',
data: {
"parentId":provinceId,
"placeKbn":"C"
},
cache:false,
success: function(data){
if("success" == data.result){
if(data.cityList != null && data.cityList.length > 0){
for(var i = 0;i < data.cityList.length;i++){
var city = data.cityList[i];
var key = (city.key == null? "":city.key);
var value = (city.value == null? "":city.value);
$("#citySelect").append("<option value = \"" + key + "\">"+ value +"</option>");
}
}else{
$("#citySelect").append("<option> </option>");
}
$("#areaSelect").append("<option> </option>");
}
if("error" == data.result){
$("#citySelect").append("<option> </option>");
$("#areaSelect").append("<option> </option>");
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
$("#errorContent").html("系統異常請聯系管理員");
}
});
}else{
$("#citySelect").append("<option> </option>");
$("#areaSelect").append("<option> </option>");
}
}
function cityChange(){
var cityId = $("#citySelect").val();
$("#areaSelect").empty();
if(cityId != null && cityId != ""){
$.ajax({
type: "POST",
url:"<span style="color:#3333ff;">factory/getChangeList</span>",
dataType:'json',
data: {
"parentId":cityId,
"placeKbn":"Q"
},
cache:false,
success: function(data){
if("success" == data.result){
if(data.areaList != null && data.areaList.length > 0){
for(var i = 0;i < data.areaList.length;i++){
var area = data.areaList[i];
var key = (area.key == null? "":area.key);
var value = (area.value == null? "":area.value);
$("#areaSelect").append("<option value = \"" + key + "\">"+ value +"</option>");
}
}else{
$("#areaSelect").append("<option> </option>");
}
}
if("error" == data.result){
$("#areaSelect").append("<option> </option>");
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
$("#errorContent").html("系統異常請聯系管理員");
}
});
}else{
$("#citySelect").append("<option> </option>");
$("#areaSelect").append("<option> </option>");
}
}
後臺controller實現代碼
@RequestMapping("<span style="color:#3333ff;">getChangeList</span>")
@ResponseBody
public Object getChangeList(String parentId,String placeKbn){
logBefore(logger, "factory/getChangeList");
Map<String,Object> returnMap = new HashMap<String,Object>();
if(FactoryConsts.CHAR_KBN_CITY.equals(placeKbn)){
if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){
returnMap.put("result", "success");
returnMap.put("cityList", getPlacelist(parentId, placeKbn));
}else{
returnMap.put("error", "市列表為空");
returnMap.put("cityList", "");
}
}else if(FactoryConsts.CHAR_KBN_AREA.equals(placeKbn)){
if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){
returnMap.put("result", "success");
returnMap.put("areaList", getPlacelist(parentId, placeKbn));
}else{
returnMap.put("error", "區列表為空");
returnMap.put("areaList", "");
}
}
return returnMap;
}
/**
* 省下拉列表
*
* @return
*/
private List<PlaceOption> getPlacelist(String parentId,String kbn){
//下拉列表
List<PlaceOption> placeList = new ArrayList<PlaceOption>();
placeList.add(new PlaceOption());
QueryPlaceInfoParam queryParam = new QueryPlaceInfoParam();
queryParam.setPlaceKbn(kbn);
if(!StringUtils.isEmpty(parentId)){
queryParam.setPlaceId(Integer.valueOf(parentId));
}
FactoryPlaceNameResult placeResult = placeInfoService.queryPlaceInfo(queryParam);
if(placeResult != null && "0".equals(placeResult.getResult())
&& placeResult.getPlaceInfo() != null
&& placeResult.getPlaceInfo().size() > FactoryConsts.INT_0){
List<PlaceInfoFa> placeInfo = new ArrayList<PlaceInfoFa>();
placeInfo = placeResult.getPlaceInfo();
for(FactoryPlaceInfo info : placeInfo){
PlaceOption option = new PlaceOption();
option.setKey(String.valueOf(info.getPlaceId()));
option.setValue(info.getPlaceName());
placeList.add(option);
}
}
return placeList;
}
同時點畫面menu的時候，畫面初期話的時候controller實現
/**
* 基本信息初期化方法
*
* @param request
* @return
*/
@RequestMapping("toFactoryBaseInfo")
public ModelAndView toFactoryBaseInfo(HttpServletRequest request){
logBefore(logger, "factory/toFactoryBaseInfo");
ModelAndView mv = new ModelAndView();
//企業類型
Map<String,String> factoryTypeMap = new TreeMap<String,String>();
factoryTypeMap.putAll(FactoryConsts.FACTORY_TYPE_MAP);
mv.addObject("factoryTypeMap", factoryTypeMap);
FactoryFactoryInfo factoryInfo = (FactoryFactoryInfo) request.getSession().getAttribute(Const.SESSION_FACTORY);
//取得企業信息
FactoryFactoryInfoParam infoParam = new FactoryFactoryInfoParam();
FactoryFactoryInfoResult infoResult = new FactoryFactoryInfoResult();
infoParam.setFactoryId(String.valueOf(factoryInfo.getFactoryId()));
infoParam.setDifferent(FactoryConsts.STRING_WEB_ONE); //web
infoResult = factoryService.factoryInfo(infoParam);
FactoryPlace factoryPlace = new FactoryPlace();
<span style="color:#3333ff;">// 省下拉列表
factoryPlace.setProvinceList(getPlacelist("0",FactoryConsts.CHAR_KBN_PROVINCE));
// 市下拉列表
factoryPlace.setCityList(getPlacelist(infoResult.getFactoryInfoEx().getProvince(),FactoryConsts.CHAR_KBN_CITY));
// 區下拉列表
factoryPlace.setAreaList(getPlacelist(infoResult.getFactoryInfoEx().getCity(),FactoryConsts.CHAR_KBN_AREA));</span>
<span style="color:#cc66cc;">mv.addObject("factoryPlace", factoryPlace);//地址的列表</span>
<span style="color:#6633ff;">mv.addObject("factoryCenterInfo", infoResult.getFactoryInfoEx());//企業表的基本信息</span>
mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");
return mv;
}
多級聯動效果就能實現瞭。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。