jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼

更新時間：2018年10月26日 10:11:15 作者：技術小能手

這篇文章主要介紹了jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

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

相比最原始的版本，美化后的選擇插件可以說是很漂亮了且功能更加強大（這里不說了，自行發(fā)掘吧）。這里主要是添加了它的特有屬性并調(diào)用 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綁定數(shù)據(jù)是很常見的，但大多數(shù)都是靜態(tài)的或者數(shù)據(jù)確定的，這些其實都很好處理，我們需要的是動態(tài)綁定且多級關聯(lián)的。

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

這里我只選擇二級關聯(lián)，更復雜的大家可以在充分掌握后再自行研究。我們要實現(xiàn)的是點擊一個select下拉框選擇后，另一個select下拉框動態(tài)關聯(lián)其對應的值，如下主select是省份，關聯(lián)的select是城市，數(shù)據(jù)庫分別存在省份和城市的表，省份表字段有SF_ID和SF_NAME，城市表字段有CY_ID，CY__NAME，CY_SFID（關聯(lián)的省份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>

這里初始化的時候后臺從數(shù)據(jù)庫取數(shù)傳值到頁面，后臺使用的是ModeView和PageData，大家視情況而定。

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

//下拉框動態(tài)關聯(lián)
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;
     // 移除以前的綁定數(shù)據(jù)
     $("#City option").remove();
     // 美化一下select（可以去除）
     var _option = "<option value=\"\"";
     _option += "></option>";
     _option += "<option value=\"\"";
     _option += ">全部</option>";
     // 綁定數(shù)據(jù)
     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的選擇插件動態(tài)綁定數(shù)據(jù)生效
     $("#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;
}

當然，上面關于數(shù)據(jù)的獲取根據(jù)自己實際代碼來編寫，主要是獲取數(shù)據(jù)并返回。

總結(jié)

以上所述是小編給大家介紹的jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: