JQuery打造下拉框聯動效果

標籤：blog   class   c   code   java   ext   

做聯動效果，若是用純JavaScript來做，往往需要輔助頁面儲存需要重新整理的結果集，然後渲染到原頁面。考慮將需要動態重新整理的內容自動拼接到前一個下拉框之後，當前一個下拉框onchange後，同級的後面的下拉框全部清除，然後重新拼接重新整理的內容。用JQuery實現比較容易，代碼以省市聯動效果為例實現。

JSP頁面代碼如下：

<li id="base"><p>生源地:</p><label>           <select id="provinceCode" name="provinceCode" onchange="refreshCity()"><option value="">全部</option><c:forEach items="${provinceInfoList}" var="provinceInfo"><option value="${provinceInfo.code}">${provinceInfo.provinceName}</option></c:forEach>   </select>        </label>   </li>

JavaScript代碼如下：

function refreshCity(){if($(‘#provinceCode‘).find(‘option:selected‘).val() == ""){$(‘#provinceCode‘).parent().nextAll(‘lable‘).remove();return;}//省份名稱var provinceName = $(‘#provinceCode‘).find(‘option:selected‘).text();provinceName = provinceName.substring(0,provinceName.length-4);// 發出Json請求，查詢子下拉框選項資料 $.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", { proviceCode : $(‘#provinceCode‘).val()}, function(data) {// 如果有子選項，則建立子下拉框if(data != null){// 刪除下拉框父級<lable>後的所有同級<lable>$(‘#provinceCode‘).parent().nextAll(‘lable‘).remove();var childId = "city";// 判斷是否存在下一級下拉框 不存在就建立if($(‘#‘+childId).length == 0){// 建立一個<li>並建立一個<select>添加到id為extra的<ul>中$("<lable><select id=‘"+childId+"‘ name=‘"+childId+"‘ ></select></li>").appendTo($(‘#base‘));}else{//清空子下拉框內容 $(‘#‘ + childId).empty();}// 遍曆json串，填充子下拉框$.each(data.city, function(i, item) {$(‘#‘ + childId).append("<option value=‘"+item.code+"‘>" + item.nameAndCode+ "</option>");});}});}

根據省份擷取市的代碼如下：

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");// 初始化準備輸出的Json串String cityJson = "";// 遍曆集合，構造json串if (cityList.size() > 0) {cityJson = "{\"city\":[";// 拼接查詢到的子項for (int i = 0; i < cityList.size(); i++) {CityInfo city = cityList.get(i);String temp = "{\"code\":\"" + city.getCode()+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"+ "\"}";// 如果是集合中最後一項，則拼接結束符，否則用","隔開if (i == cityList.size() - 1) {cityJson = cityJson + temp + "]}";} else {cityJson = cityJson + temp + ",";}}}// 設定輸出的字元集和類型並輸出json串response.setCharacterEncoding("UTF-8");response.setContentType("json");response.getWriter().print(cityJson);}