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")@ResponseBodypublic 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;}當然，上面關于數據的獲取根據自己實際代碼來編寫，主要是獲取數據并返回。
總結
以上所述是小編給大家介紹的jQuery Ajax實現Select多級關聯動態綁定數據的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
