Easyui多个下拉框联动效果
好久没写前端了,以前在做多级联动的时候,用的是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多个下拉框联动效果的更多相关文章
- MVC 下拉框联动效果(单选)
下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...
- JQuery打造下拉框联动效果
做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...
- jquery 实现层级下拉框联动效果 代码
<select name="fCareId" id="fCareId"> <option selected="selected&qu ...
- easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- html年月日下拉联动菜单 年月日三下拉框联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 月薪10K必备--C#下拉框联动
下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...
- Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
随机推荐
- git添加远程库基本操作
git添加远程库的基本步骤: 1.登录github,创建一个仓库,最好和本地仓库同名 2.输入git指令,把路径改成本地仓库所在盘符,如图 (project_03是我的本地仓库名称,路径是在G盘的WW ...
- sublime Error executing: /usr/bin/security dump-trust-settings -d
sublime text2突然crash,无法简单粗暴的关闭,就开始认真解决这个问题. 问题: 参考文献:https://github.com/wbond/package_control/issues ...
- 【Android】8.0活动的生命周期(一)——理论知识、活动的启动方式
1.0 Android是使用任务(Task)来管理活动的,活动就像栈一样堆放着在一起. 每个活动的生命周期最多可能会有四种状态: 1.1 运行状态 位于栈顶 1.2 暂停状态 不在栈顶但在界面上仍处于 ...
- mybatis3 step by step 快速上手
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...
- 【NLP_Stanford课堂】最小编辑距离
一.什么是最小编辑距离 最小编辑距离:是用以衡量两个字符串之间的相似度,是两个字符串之间的最小操作数,即从一个字符转换成另一个字符所需要的操作数,包括插入.删除和置换. 每个操作数的cost: 每个操 ...
- 爬虫之绘图matplotlib与词云(七)
1 绘制条形图 import matplotlib # 数据可视化 from matplotlib import pyplot as plt # 配置字体 matplotlib.rcParams[&q ...
- c++链表实现学生成绩管理系统(简易版)
#include<iostream> using namespace std; typedef struct student{ int id;//学号 string sex; string ...
- 从github下载一个单一文件
以ubuntu + wget为例 1) 浏览器中打开需要需要下载的文件 2) 点击 raw按钮 3) 从浏览器地址栏中拷贝地址 4) wget + 地址
- Linux xclock打不开时钟终端
一般执行该操作的都是在安装oracle数据库或其他应用时,需要测试是否可以正常弹层执行的: 网络关于这个的描述和处理大片片的,但是符合自己实际情况的,还是需要直接去确认: 两步处理: 第一步: 使用r ...
- OC typedef(起别名)
// #define Integer int // 给基本数据类型起别名 void test() { typedef int Integer; typedef Integer MyInteger; t ...