JQuery打造下拉框聯動效果

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

--------------------------------------分割線 --------------------------------------

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

--------------------------------------分割線 --------------------------------------

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);
}

jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡