自动补齐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;
    }
   })
  }
 });
  
});


Ajax 实现级联下拉框

级联下拉框随处可见,最常见的就是省市的级联,在选择省份后,对应的区县的下拉选择列表的下拉选择内容也会发生相应改变,即所谓的级联下拉框。这种页面异步刷新,无可厚非,AJax是首选。 在做一个管理系统时...
  • sdvjbc
  • sdvjbc
  • 2016年05月12日 13:19
  • 889

基于JQuery的Select下拉框下拉框联动(级联)

这段时间在指导学生完成实训项目,由一个用到了JQuery进行下拉框(select)联动(添加删除option)的操作,本来在上课中都是讲过的,但时间一长都忘光了,下面把这段简单的JS贴出来,给入门者一...
  • yang_ai
  • yang_ai
  • 2016年08月08日 09:42
  • 9152

利用jquery实现select下拉框级联效果

所谓级联效果,即页面上存在具有包含关系的多组下拉框。当逻辑上的父级下拉框某个选项被选中(即selected),其包含的列表内容作为子级下拉框中的选项(option)供用户选择。例如:当用户选择所在区域...
  • u012283400
  • u012283400
  • 2017年03月22日 14:53
  • 1197

POI导出带级联下拉框的excel

效果: 所需jar包: poi-3.8-20120326.jar demo: import java.io.FileNotFoundException; import java.io.Fi...
  • goodleiwei
  • goodleiwei
  • 2013年07月24日 15:45
  • 9127

Grails级联下拉框的实现

我们在新增用户时,需要填写用户所在的机构和部门名称。部门属于一个机构,它们是多对一的管理。在设计模型时已经做了定义。但系统自动生成的GSP页面只提供了机构和部门的下拉选择框,选择部门时与机构是不相关联...
  • laoxue_6699
  • laoxue_6699
  • 2013年08月02日 09:07
  • 2109

jq实现级联下拉框效果

jquery5-级联下拉框数据装载中..................
  • zzh87615
  • zzh87615
  • 2010年07月19日 15:15
  • 3367

【JSP案例】无限级联|下拉列表

本案例主要通过无限级联的数据结构来设计下拉列表 效果图: 1)设计无限级联数据库,并赋值 设计Id和ParentId字段,根类Id通过子类的ParentId来寻找,比如计算机是根类,他的...
  • czk_love_wyq
  • czk_love_wyq
  • 2014年12月22日 11:00
  • 1047

dojo级联步骤

dojo级联步骤 1、数据请求回来后,检查数据格式是否满足下拉框的数据格式; 2、通过firebug进行调试,检查select下拉框子项结点是否取道; 3、查看API文档,保证改变store的方法...
  • you23hai45
  • you23hai45
  • 2014年02月13日 23:45
  • 1289

poi 实现下拉框级联选择省市

import java.io.FileOutputStream; import java.io.IOException; import org.apache.poi.hssf.usermodel.D...
  • fgyibupi
  • fgyibupi
  • 2014年01月20日 09:47
  • 1758

JQuery——级联下拉框

最近看JQuery视频,跟着实现了几个例子,整个过程中感觉不只是学到了新知识,更重新巩固了之前学习的内容,收获着实不小,今天小编敲的级联下拉框效果的视频,很喜欢这个效果,也把学习成果记录下来。  ...
  • u013034793
  • u013034793
  • 2016年01月19日 21:44
  • 1537
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自动补齐flexselect+级联下拉框案例
举报原因:
原因补充:

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