自动补齐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;
}
})
}
});
});
自动补齐flexselect+级联下拉框案例的更多相关文章
- EXCEL(1)级联下拉框
EXCEL级联下拉框 http://jingyan.baidu.com/article/3c343ff756e0cf0d377963f9.html 在输入一些多级项目时,如果输入前一级内容后,能够自动 ...
- struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)
针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...
- jQuery无限级联下拉框插件
自己编写jQuery插件 之 无限级联下拉框 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...
- JQuery和ASP.NET分别实现级联下拉框效果
在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...
- js基于json的级联下拉框
级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...
- JS级联下拉框
//Ajax级联获取SDKfunction GetDropDownList(parent_ddlID, fill_dllID, url, param) { this.pId = parent_d ...
- C# ,数据导出到带有级联下拉框的模板(一,模板的级联功能)
一.首先解决如何做模板中增加级联功能 1,首先打开一个新的Excel文件,新增sheet,把分类保存在里面,如下图所示 2.回到sheet1,选中要增加下拉框的行(注意:请排除首行,首行是标题) 3. ...
- Struts2 级联下拉框 详解析
目录(?)[+] 运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language ...
- jsp页面上的下拉框案例(Struts2)
<s:select></s:select>包含的属性有:list="" :name="" :value="" ...
随机推荐
- ldo的一些参数理解
psrr是衡量ldo抑制外来信号噪声的能力,而内部噪声是由基准电压和误差放大器引入的.通常器件手册说的输出噪声指的就是内部噪声. ldo的暂态响应也是一个重要指标
- vs2013 + python3.52 + boost1.61, 编译C++库失败
使用vs2013 + python3.52 + boost1.61, 编译C++库, 失败! 提示如下": boost::python::detail::init_module(st ...
- Windows运行命令集锦
开始菜单中的“运行”(Win+R)是通向程序的快捷途径,输入特定的命令后,即可快速的打开Windows的大部分程序,熟练的运用它,将给我们的操作带来诸多便捷. winver 检查Windows版本 ...
- CStdioFile的Writestring无法写入中文的问题
解决UNICODE字符集下CStdioFile的Writestring无法写入中文的问题 2009-12-01 23:11 以下代码文件以CStdioFile向无法向文本中写入中文(用notepad. ...
- vc中edit控件使用总结
通过类向导可以生成两种类成员变量,一种是cstring类型,一种是cedit类型.在程序中使用时如果只是简单的获取 edit控件内容,或设置简单的内容建议使用cstring类型成员变量.示例:CStr ...
- 干净的 js测试页面
<!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8&quo ...
- LogStation 支持浏览器实时查看日志
我们在logback 分布式日志汇总中已经将日志输出到了all.logs,LogStation支持浏览器实时查看日志,适合研发和运维彼此独立的场景:研发没有服务器权限,却想看日志实时输出.再配合ngi ...
- bzoj 3867: Nice boat
题意:给定一个正整数序列,操作是1.区间赋值,2.区间大于x的数与x取gcd,最后输出操作后的序列 用平衡树维护相同数组成的连续段,每次操作至多增加两个连续段,操作2记录一下区间最小值然后暴力修改,每 ...
- 一张图看懂高通QC1.0-QC4.0快充进化之路!QC2.0跟QC3.0充电区别
快充技术日新月异,快充市场百家争鸣的今天,高通QC快充依然主导着市场.如今QC快充已发展到第四代,每一代都有着革命性的进步.从QC1.0到QC4.0更新换代时间之短,不免让广大人民群众抱怨. “啥?老 ...
- PHP中实现函数重载
转载自:http://cnn237111.blog.51cto.com/2359144/1284085 由于PHP是弱类型语言,因此函数的输入参数类型无法确定(可以使用类型暗示,但是类型暗示无法用在诸 ...