自动补齐flexselect+级联下拉框案例

转载 2015年07月06日 17:58:40

在开发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;
    }
   })
  }
 });
  
});


自动补齐其他输入框

  • 2008年07月16日 09:40
  • 7KB
  • 下载

【Android】自定义控件实现自动补齐邮箱后缀的输入框

使用自定义控件实现一个可以自动补齐邮箱后缀、实时校验邮箱格式的输入框...

防google自动补齐

  • 2011年03月20日 21:44
  • 4KB
  • 下载

spket 自动补齐代码

  • 2014年06月30日 21:25
  • 27.97MB
  • 下载

Vim函数自动补齐(包括库函数)

我用的是ubantu 64位的. 主要是两个东西,第一个是Ctags,OmniCppComplete. 首先下载Ctags:sudo apt-get install ctags.如果需要安装就安装. ...

Qt Creator 自动补齐函数参数问题

遇到的问题 使用Qt Creator集成开发环境进行项目编码时,经常需要重写父类的虚函数去实现自己想要的功能,但是当声明这些函数时,经常遇到函数名可以自动补齐,但是函数的参数却不能自动补齐的情况,可...

EditPlus的css自动补齐

  • 2010年04月10日 00:19
  • 5KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自动补齐flexselect+级联下拉框案例
举报原因:
原因补充:

(最多只允许输入30个字)