欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年10月26日 10:11:15   作者：技術(shù)小能手  
這篇文章主要介紹了jQuery Ajax實(shí)現(xiàn)Select多級關(guān)聯(lián)動(dòng)態(tài)綁定數(shù)據(jù)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

相比最原始的版本，美化后的選擇插件可以說是很漂亮了且功能更加強(qiáng)大（這里不說了，自行發(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。

下面進(jìn)入到主題，select綁定數(shù)據(jù)是很常見的，但大多數(shù)都是靜態(tài)的或者數(shù)據(jù)確定的，這些其實(shí)都很好處理，我們需要的是動(dòng)態(tài)綁定且多級關(guān)聯(lián)的。

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

這里我只選擇二級關(guān)聯(lián)，更復(fù)雜的大家可以在充分掌握后再自行研究。我們要實(shí)現(xiàn)的是點(diǎn)擊一個(gè)select下拉框選擇后，另一個(gè)select下拉框動(dòng)態(tài)關(guān)聯(lián)其對應(yīng)的值，如下主select是省份，關(guān)聯(lián)的select是城市，數(shù)據(jù)庫分別存在省份和城市的表，省份表字段有SF_ID和SF_NAME，城市表字段有CY_ID，CY__NAME，CY_SFID（關(guān)聯(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í)候后臺從數(shù)據(jù)庫取數(shù)傳值到頁面，后臺使用的是ModeView和PageData，大家視情況而定。

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

//下拉框動(dòng)態(tài)關(guān)聯(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的選擇插件動(dòng)態(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;
}

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

總結(jié)

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

相關(guān)文章

最新評論