好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做

eayui的combobox  有onSelect,onLoadSuccess等方法,具体可以看http://www.jeasyui.net/plugins/169.html文档API

1、html

<table style="padding:10px 20px 10px 40px;">
<tr>
<td>省级:</td>
<td>
<input id="province" name="province" class="easyui-combobox"/>
</td>
<td>市级:</td>
<td>
<input id="city" class="easyui-combobox"/>
</td>
<td>区级:</td>
<td>
<input id="county" class="easyui-combobox"/>
</td>
</tr>
</table>

2、js

$('#province').combobox({
valueField:'code',
textField:'name',
url:'../../area/getOne.do',
method:'get',
onSelect:function(rec){
var url1='../../area/getTwo.do?pid='+rec.code+'&tag='+(new Date().getTime());
$('#city').combobox('reload',url1);
},
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code);//前面设置的valueField属性名 }
});
$('#city').combobox({
valueField:'code',
textField:'name',
method:'get',
onSelect:function(rec){
var url1='../../area/getThree.do?pid='+rec.code+'&tag='+(new Date().getTime());
$('#county').combobox('reload',url1);
},
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code); }
});
$('#county').combobox({
valueField:'code',
textField:'name',
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code); }
});

3、效果图

当选择第一个下拉框时,会联动后面2个下拉框,用的就是onselect方法;

而初始化选择效果,使用的是onLoadSuccess,设置默认第一个值显示

Easyui多个下拉框联动效果的更多相关文章

  1. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

  2. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  3. jquery 实现层级下拉框联动效果 代码

    <select name="fCareId" id="fCareId"> <option selected="selected&qu ...

  4. easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

    easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...

  5. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  6. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  7. html年月日下拉联动菜单 年月日三下拉框联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 月薪10K必备--C#下拉框联动

                   下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

  9. Ext 下拉框联动第一次显示不正常的问题

    做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...

随机推荐

  1. Spring Chapter4 WebSocket 胡乱翻译 (二)

    书接上文,Spring Chapter4 WebSocket 胡乱翻译 (一) 4.4.4. 消息流 一旦暴露了STOMP端点,Spring应用程序就成为连接客户端的STOMP代理. 本节介绍服务器端 ...

  2. CSS布局中的问题解决方式

    1.解决搜索框和按钮不对齐的方法 vertical-align属性只有两个元素设置为display:inline-block才有效 2.盒子莫名的分行现象 问题描述:比如父盒子宽度为960px,两个左 ...

  3. CSS3中的Flexbox弹性布局(一)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  4. matlab练习程序(单源最短路径Bellman-Ford)

    该算法可以用来解决一般(边的权值为负)的单源最短路径问题,而dijkstra只能解决权值非负的情况. 此算法使用松弛技术,对每一个顶点,逐步减少源到该顶点的路径的估计值,直到达到最短的路径. 算法运算 ...

  5. Ubuntu 14.04默认以字符界面启动

    在windows上跑虚拟机比较资源,特别当以图形界面启动时,如果宿主机性能不好,就相当卡. 让Ubuntu 14.04默认以字符界面启动的方法: 编辑文件:etc/default/grub 将  GR ...

  6. 如何安全移除dataguard和如何安全移除备库并把备库变成一个单独的数据库

    参考MOS:How To Remove Standby Database And Convert It to Standalone Database (文档 ID 2074686.1) How to ...

  7. May 13th 2017 Week 19th Saturday

    Mountains look beautiful from a distance. 远处看山山更美. This gnomic seems to circulate very long, its mor ...

  8. HTTPS科普(转)

    为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...

  9. RF脚本中的坑2: pip下载python库时报certificate verify failed

    用pip命令下载第三方library时,报错certificate verify failed,截图如下: 在网上找了各种教程,包括修改了pip下载源地址也无效果,最后祭出了杀手锏——FQ,FQ成功后 ...

  10. HDU 1853 MCMF

    题意:给定一个有向带权图,使得每一个点都在一个环上,而且权之和最小. 分析:每个点在一个环上,入度 = 出度 = 1,拆点入点,出点,s到所有入点全部满载的最小费用MCMF; #include < ...