下拉列表框三級聯動
阿新 • • 發佈:2018-12-28
Web頁面實現三級聯動
最近專案裡面有一個功能需要使用三級聯動來實現,但是專案中又沒有很好的 demo 來實現這個功能,於是乎自己手敲了一個簡單的三級聯動的程式碼,記錄一下。時間倉促,程式碼中還有很多地方可以優化。
<div class="row"> <div class="col-sm-6"> <select id="province" name="province" class="chosen-select form-control m-b" tabindex="1"> <option>===請選擇===</option> </select> </div> <span style="color: red; font-size: 23px">*</span> <small>[ 省 ]</small> </div> <br> <div class="row"> <div class="col-sm-6"> <select id="city" name="city" class="chosen-select form-control m-b" tabindex="1"> <option>===請選擇===</option> </select> </div> <span style="color: red; font-size: 23px">*</span> <small>[ 市 ]</small> </div> <br> <div class="row"> <div class="col-sm-6"> <select id="district" name="district" class="chosen-select form-control m-b" tabindex="1"> <option>===請選擇===</option> </select> </div> <span style="color: red; font-size: 23px">*</span> <small>[ 區 ]</small> </div> <br> <script type="text/javascript"> var province_id = '1000'; var city_id ='1100'; var district_id = '1110'; // 初始化省 initAddress(); function initAddress() { $.ajax({ type:'GET', url:'${contextPath}/test/get_province', success:function(data) { $.each(data.data, function(key, value) { $("#province").append("<option value='"+key+"'>" + value + "</option>"); }); //回顯資料 if (province_id != null) { $("#province option").each(function () { if ($(this).val() == province_id){ $(this).attr("selected", true); getCity(province_id) } }) } } }); } function getCity(province_id) { $("#city").find("option").remove(); $.ajax({ type:'GET', url:'${contextPath}/test/get_city', data:{ province_id:province_id }, success:function(data) { $("#city").append("<option value=''>" + '===請選擇===' + "</option>"); $.each(data.data, function(key, value) { $("#city").append("<option value='"+key+"'>" + value + "</option>"); }); //回顯資料 if (city_id != null) { $("#city option").each(function () { if ($(this).val() == city_id){ $(this).attr("selected", true); getDistrict(city_id) } }) } } }); } function getDistrict(city_id) { $("#district").find("option").remove(); $.ajax({ type:'GET', url:'${contextPath}/test/get_district', data:{ city_id:city_id }, success:function(data) { $("#district").append("<option value=''>" + '===請選擇===' + "</option>"); $.each(data.data, function(key, value) { $("#district").append("<option value='"+key+"'>" + value + "</option>"); }); //回顯資料 if (district_id != null) { $("#district option").each(function () { if ($(this).val() == district_id) $(this).attr("selected", true); }) } } }); } //change事件監聽province改變,獲取該省份下面的市 $("#province").change(function() { var province_id = $("#province option:selected").val(); getCity(province_id); getDistrict(null); }); //change事件監聽city改變,獲取該省份下面的市 $("#city").change(function() { var city_id = $("#city option:selected").val(); getDistrict(city_id); }); </script>
Java 後臺程式碼
/** * 獲取省 * * @return */ @ResponseBody @RequestMapping("/get_province") public JSONResultDTO get_province() { Map<String, String> provinceMap = new HashMap<>(4); provinceMap.put("1000","江蘇省"); provinceMap.put("2000","山東省"); return createSuccessResult(provinceMap); } /** * 獲取市 * * @return */ @ResponseBody @RequestMapping("/get_city") public JSONResultDTO get_city(String province_id) { Map<String, String> provinceMap = new HashMap<>(4); if (province_id.equals("1000")) { provinceMap.put("1100", "南京市"); provinceMap.put("1200", "無錫市"); } if (province_id.equals("2000")) { provinceMap.put("2100", "濟南市"); provinceMap.put("2200", "青島市"); } return createSuccessResult(provinceMap); } /** * 獲取區 * * @return */ @ResponseBody @RequestMapping("/get_district") public JSONResultDTO get_district(String city_id) { Map<String, String> cityMap = new HashMap<>(8); if (city_id.equals("1100")) { cityMap.put("1110", "浦口區"); cityMap.put("1120", "鼓樓區"); } if (city_id.equals("1200")) { cityMap.put("1210", "崇安區"); cityMap.put("1220", "濱湖區"); } if (city_id.equals("2100")) { cityMap.put("2110", "歷下區"); cityMap.put("2120", "市中區"); } if (city_id.equals("2200")) { cityMap.put("2210", "市南區"); cityMap.put("2220", "市北區"); } return createSuccessResult(cityMap); }
三級聯動的關鍵程式碼就是這幾行:
$.each(data.data, function(key, value) { $("#province").append("<option value='"+key+"'>" + value + "</option>"); }); //回顯資料 if (province_id != null) { $("#province option").each(function () { if ($(this).val() == province_id){ $(this).attr("selected", true); getCity(province_id) } }) }
迴圈後臺的資料,append
到對應的下拉列表框中,然後下面迴圈下拉資料和變數比較,用於編輯頁面的資料回顯。對比後將其設定為 selected
並且呼叫下一級的查詢。
本文由個人 hexo 部落格 co2fe.com 遷移
date: 2018-10-26 09:44:19