JS+AJAX實現(xiàn)省市區(qū)的下拉列表聯(lián)動
更新時間：2021年09月07日 16:41:59 作者：火神大我_2015
這篇文章主要為大家詳細介紹了JS+AJAX實現(xiàn)省市區(qū)的下拉列表聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS+AJAX實現(xiàn)省市區(qū)下拉列表聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下
效果圖如下，DB中存取的數(shù)據(jù)來抽取.
前臺JSP頁面的實現(xiàn)
<div class="info">
<div class="title">企業(yè)地址:</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實現(xiàn)代碼
效果：實現(xiàn)多次ajax請求，聯(lián)動搜索數(shù)據(jù)
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("系統(tǒng)異常請聯(lián)系管理員");
}
});
}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("系統(tǒng)異常請聯(lián)系管理員");
}
});
}else{
$("#citySelect").append("<option> </option>");
$("#areaSelect").append("<option> </option>");
}
}
后臺controller實現(xiàn)代碼
@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", "區(qū)列表為空");
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實現(xiàn)
/**
* 基本信息初期化方法
*
* @param request
* @return
*/
@RequestMapping("toFactoryBaseInfo")
public ModelAndView toFactoryBaseInfo(HttpServletRequest request){
logBefore(logger, "factory/toFactoryBaseInfo");
ModelAndView mv = new ModelAndView();
//企業(yè)類型
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);
//取得企業(yè)信息
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));
// 區(qū)下拉列表
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());//企業(yè)表的基本信息</span>
mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");
return mv;
}
多級聯(lián)動效果就能實現(xiàn)了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于JavaScript實現(xiàn)省市聯(lián)動效果
- JavaScript實現(xiàn)省市聯(lián)動效果
- JavaScript實現(xiàn)省市聯(lián)動過程中bug的解決方法
- 基于JS實現(xiàn)省市聯(lián)動效果代碼分享
- js省市聯(lián)動效果完整實例代碼
- JSON+HTML實現(xiàn)國家省市聯(lián)動選擇效果
- JavaScript二維數(shù)組實現(xiàn)的省市聯(lián)動菜單
- JavaScript省市聯(lián)動實現(xiàn)代碼
- js實現(xiàn)省市聯(lián)動效果的簡單實例
- javascript 09年最新版的省市聯(lián)動
- js實現(xiàn)下拉列表選中某個值的方法(3種方法)
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jquery+json 通用三級聯(lián)動下拉列表
相關(guān)文章
這篇文章主要介紹了js window對象屬性和方法相關(guān)資料整理,需要的朋友可以參考下2015-11-11
CocosCreator通用框架設(shè)計之網(wǎng)絡(luò)
這篇文章主要介紹了CocosCreator通用框架設(shè)計之網(wǎng)絡(luò)，詳細講解了WebSocket的原理和使用方法，對WebSocket感興趣的同學(xué)，一定要看一下2021-04-04
這篇文章主要介紹了webpack4處理SCSS的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Javascript字符串方法詳解的相關(guān)資料,在平時工作中經(jīng)常會用到的，非常不錯，需要的朋友可以參考下,希望能夠給你帶來幫助2021-09-09
這篇文章主要為大家詳細介紹了JS中對Cookie的具體操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
Next.js使用getServerSideProps進行服務(wù)器端渲染demo
這篇文章主要為大家介紹了Next.js使用getServerSideProps進行服務(wù)器端渲染demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Ionic 是目前最有潛力的一款 HTML5 手機應(yīng)用開發(fā)框架。在開發(fā)過程中我們同樣會遇到各種各樣奇葩的問題。下面小編給大家?guī)砹擞嘘P(guān)IONIC頁面底部被遮住無法向上滾動問題的解決方案2016-09-09
這篇文章主要介紹了javascript 獲取元素樣式必殺技,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了js倒計時簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
一個特殊的排序需求的javascript實現(xiàn)代碼
看了之后1是手癢癢，2是覺得樓主的實現(xiàn)有問題，就動手寫了一下，用js,大概用了30-40分鐘。2009-09-09