關於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;
}

    當然，上面關於資料的獲取根據自己實際程式碼來編寫，主要是獲取資料並返回。

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