自動補齊flexselect+級聯下拉框案例

在開發web應用時，經常遇到類似省市區級聯下拉框操作，即選中省份自動級聯加載該省份所有的市，選中市自動級聯加載該市所有的區；假設省市區的數據量很大，此時用戶想選中某市，因而要從上往下查找，可能半天都找不到，用戶體驗不佳，因此引入jQuery插件–自動補齊flexselect可解決該弊端，因爲該插件支持模糊檢索自動補齊，可在極短時間內找到想要的結果，節省了時間又增強了用戶操作速度。

自動補齊flexselect插件用法請看：http://www.tieguanyin168.com/index.php/jqueryflexselect-1505.html

以下模擬省市區級聯案例，效果如下：

源碼：
1、服務器端代碼：

public void queryCity() {
 String grade=this.getParameter("grade");
 List<City> models = cityService.searchCitiesByPid(Integer.valueOf(grade));
 if(models!=null&&models.size()>0){
     //{"code":200,"data":[{"acronym":"LCQ","areaCode":"","fullName":"福建省泉州市鯉城區","grade":3,"id":1463,"isDel":0,"name":"鯉城區","pid":162,"sellQuantity":0,"signQuantity":0,"zipCode":""},
            //        {"acronym":"NAS","areaCode":"","fullName":"福建省泉州市南安市","grade":3,"id":1474,"isDel":0,"name":"南安市","pid":162,"sellQuantity":0,"signQuantity":0,"zipCode":""}],
            //   "success":true}
     Utils.returnJson(models);
 }
}

2、jsp代碼

<div class="bg_row_out">
 <div class="bg_row_out_1">           <font color="red">*</font>省：</div>
 <div class="bg_row_out_2 required" style="border-right: 0 none;border-bottom: 0px solid #cccccc;">
         <!--從服務器獲取-->
  <select id="provice" name="company.provice" class="newsletter_input">
   <option value=""></option>
   <c:forEach items="${provinces}" var="provice">
    <option value="${provice.id }">${provice.name }</option>
   </c:forEach>
  </select>
 </div>
</div>
<div class="bg_row_out">
 <div class="bg_row_out_1">           <font color="red">*</font>市：</div>
 <div class="bg_row_out_2 required" style="border-right: 0 none;border-bottom: 0px solid #cccccc;">
   <select id="city" name="company.city" class="newsletter_input">
    <option value=""></option>
   </select>
 </div>
</div>
<div class="bg_row_out">
 <div class="bg_row_out_1">           <font color="red">*</font>區：</div>
 <div class="bg_row_out_2 required" style="border-right: 0 none;border-bottom: 0px solid #cccccc;">
   <select id="district" name="company.district" class="newsletter_input">
    <option value=""></option>
   </select>
 </div>
</div>

3、js代碼

$(function(){
 var district = $("#district").flexselect();
 $("#provice").flexselect({callback:function(){
   $.ajax( {
    url : "queryCity.htm",
    data : {
     "date" : new Date().getTime(),
     "grade" : $("#provice").val()
    },
    dataType:"json",
    success : function(result) {
     if(result.code != 200){
      alert(result.data);
      return;
     }
     result = result.data;
     var resultStr = [];
     for ( var i = 0; i < result.length; i++) {
      resultStr.push({name:result[i].name, value:result[i].id});
     }
     city.flexselect[0].cache = resultStr;
    }
   })
  }
 });
 var city=$("#city").flexselect({callback:function(){
   $.ajax( {
    url : "queryCity.htm",
    data : {
     "date" : new Date().getTime(),
     "grade" : $("#city").val()
    },
    dataType:"json",
    success : function(result) {
     if(result.code != 200){
      alert(result.data);
      return;
     }
     result = result.data;
     var resultStr = [];
     for ( var i = 0; i < result.length; i++) {
      resultStr.push({name:result[i].name, value:result[i].id});
     }
     district.flexselect[0].cache = resultStr;
    }
   })
  }
 });
  
});