溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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;
}
當然，上面關于數據的獲取根據自己實際代碼來編寫，主要是獲取數據并返回。
總結
以上所述是小編給大家介紹的jQuery Ajax實現Select多級關聯動態綁定數據的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
