JQuery Ajax實現Select多級關聯動態綁定數據

    關於JQuery選擇插件的使用在這裏有些心得和你們分享一下，但願能幫到你們。

    jQuery選擇插件分爲基本版和美化版，重點說下美化版，以下圖所示：

    相比最原始的版本，美化後的選擇插件能夠說是很漂亮了且功能更增強大（這裏不說了，自行發掘吧）。這裏主要是添加了它的特有屬性並調用 class=」chzn-select」：

jsp頁面：
<select class=」chzn-select」 id="CODE" name="CODE">
   ......
</select>
js頁面：
$(".chzn-select").chosen();

    注意引用jQuery的js，有多種版本，建議使用高版本，如 jquery-1.9.1.min.js。

    下面進入到主題，select綁定數據是很常見的，但大多數都是靜態的或者數據肯定的，這些其實都很好處理，咱們須要的是動態綁定且多級關聯的。

    經過下面的實例來看看是如何一步步處理的：

    這裏我只選擇二級關聯，更復雜的你們能夠在充分掌握後再自行研究。咱們要實現的是點擊一個select下拉框選擇後，另外一個select下拉框動態關聯其對應的值，以下主select是省份，關聯的select是城市，數據庫分別存在省份和城市的表，省份表字段有SF_ID和SF_NAME，城市表字段有CY_ID，CY__NAME，CY_SFID（關聯的省份ID）：

<!-- 省份 -->
<select class="chzn-select" id="ShengFen" name="ShengFen" onChange="setCity();" data-placeholder="請選擇省份">
   <option value=""></option>
   <option value="">所有</option>
   <c:foreach items="${sfList}" var="sf">
      <option value="${sf.SF_ID}" <c:if  test="${pd.sfId == sf.SF_ID}">selected</c:if>>${sf.SF_NAME} 
      </option>
   </c:foreach>
</select>
<!-- 城市 -->
<select class="chzn-select" id="City" name="City" data-placeholder="請選擇城市">
   <option value=""></option>
   <option value="">所有</option>
   <c:foreach items="${cyList}" var="cy">
      <option value="${cy.CY_ID}" <c:if  test="${pd.cyId == cy.CY_ID}">selected</c:if>>${cy.CY_NAME} 
      </option>
   </c:foreach>
</select>

    這裏初始化的時候後臺從數據庫取數傳值到頁面，後臺使用的是ModeView和PageData，你們視狀況而定。

    首先給主select省份添加onChange方法，表示選擇更改的觸發，即省份修改後城市對應的下拉框中的值也要變化，對應的處理方法是setCity()，咱們使用ajax的方式來獲取數據，以下在js中處理：

//下拉框動態關聯
function setCity(){
   // 獲取選擇的省份的ID
   var sfId = $("#ShengFen").val();
   $.ajax({
     type : "POST",
     url : "SFAndCity/setCity.do",
     data : {"sfId":sfId},
     dataType : "json",
     success : function(data){
         var cyList = data.cyList;
         // 移除之前的綁定數據
         $("#City option").remove();
         // 美化一下select（能夠去除）
         var _option = "<option value=\"\"";
         _option += "></option>";
         _option += "<option value=\"\"";
         _option += ">所有</option>";
         // 綁定數據
         if(cfList && cyList.length != 0){
             $("select[name=City]").append(_option);
             for(var i=0;i<cyList.length;i++){
                var option = "<option value=\""+cyList.CY_ID+"\"";
                option += ">"+cyList.CY_NAME+"</option>";
                $("select[name=City]").append(option);
             }
         }else{
              $("select[name=City]").append(_option);
         }
         // 保證jQuery的選擇插件動態綁定數據生效
         $("#City").trigger("liszt:updated");
         $("#City").chosen();
     }
   });

}

    最後就是後臺的處理了，以下：

@RequestMapping(value="/setCity")
@ResponseBody
public Map<String,Object> setCity(){
    Map<String,Object> map = new HashMap<String,Object>();
    PageData pd = new PageData();
    try{
       pd = this.getPageData();
       String sfId = pd.getString("sfId");  //和ajax中傳遞的保持一致
       pd.put("CY_SFID",sfId);
       List<PageData> cyList = cyService.listCityBysfId(pd);
       map.put("cyList",cyList);   //和ajax中獲取的保持一致
       return map;
    }catch(Exception e){
       
    }
    return map;
}

    固然，上面關於數據的獲取根據本身實際代碼來編寫，主要是獲取數據並返回。

    這樣就大功告成了，實際的結果是：每選擇一個省份，城市下拉框中的值都會隨之變化。