好久没写前端了,以前在做多级联动的时候,用的是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. glyphicons-halflings-regular.woff2 文件 404

    搜索了下,果然是因为mine没有配置的原因. http://stackoverflow.com/questions/32300578/how-to-remove-error-about-glyphic ...

  2. POI Excel解析

    Maven 引入POI <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi&l ...

  3. Spring课程 Spring入门篇 4-7 Spring bean装配之基于java的容器注解说明--@Scope 控制bean的单例和多例

    1 解析 1.1 bean的单例和多例的应用场景 1.2 单例多例的验证方式 1.3 @Scope注解单例多例应用 2 代码演练 2.1 @Scope代码应用 1 解析 1.1 bean的单例和多例的 ...

  4. 由AlphaGO引发的思考

    这几天AlphaGO的人机大战炒得热火朝天,给谷歌的AI做了一次大大的广告,可谓风头出尽,大有AI战胜一切的“趋势”.而且,像阿法狗.阿法猫之类的新词不断,成了饭前茶后人们议论的热点.作为一个留学过日 ...

  5. Jenkins新建节点,启动方式没有“通过Java Web启动代理”选项怎么办?

    在Jenkins中,打开“系统管理”→“管理节点”→“新建节点”页面时,“启动方式”选项没有“通过Java Web启动代理”,怎么办? 打开“系统管理”,进入“全局安全配置”页面. 1. “JNLP代 ...

  6. MySQL几个join

    1.因为关系型数据库的基本原理,是基于“关系代数”.最重要的一类关系代数,就是2个集合之间的运算. 从集合运算的视角,去理解SQL中的几个常用join (1)inner join (2)left jo ...

  7. 配置一个高效快速的Git环境

    username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...

  8. CSS z-index的用法

    理清 position及z-index的用法: static :  无特殊定位,对象遵循HTML定位规则absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属 ...

  9. tensorflow ImportError: libmklml_intel.so: cannot open shared object file: No such file or directory

    通过whl文件安装 tensorflow,显示缺少libmklml_intel.so 需要 1)安装intel MKL库 https://software.intel.com/en-us/articl ...

  10. IOS ASI和AFN的 区别

    一.底层实现 1> AFN的底层基于OC的NSURLConnection和NSURLSession2> ASI的底层基于纯C语言的CFNetwork框架3> ASI的运行性能 高于 ...