easy ui 下拉级联效果 ,下拉框绑定数据select控件


html代码:
①两个下拉框,一个是省,另一个市
<tr>
<td>省:</td>
<td>
<select id="ProvinceId" style="width: 150px;">
</select></td>
<td>市:</td>
<td>
<select id="LocationId" style="width: 150px;">
</select></td>
</tr>
Js代码:
①当用户在选择“省”的下拉框的时候,会传入当前选择“省”的id,然后把“省”的id传给“市”的方法从而查出所有市的数据
//给省绑定数据
$('#ProvinceId').combobox({
url: 'Handler/CommonDataHandler.ashx?Func=getprovince&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'ProvinceId',
textField: 'Province',
onHidePanel: function () {
$("#LocationId").combobox("setValue", '');
var ProvinceId = $('#ProvinceId').combobox('getValue'); $.ajax({
type: "POST",
url: "Handler/CommonDataHandler.ashx?Func=getcity&format=list&ProvinceId=" + ProvinceId,
cache: false,
dataType: "json",
success: function (data) {
$("#LocationId").combobox("loadData", data);
}
});
}
});
//给市绑定数据
$('#LocationId').combobox({
url: 'Handler/CommonDataHandler.ashx?Func=getcity&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'LocationId',
textField: 'City'
});
省的返回数据格式:[{"LocationId":3269,"ProvinceId":1100000,"Province":"北京","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3270,"ProvinceId":1200000,"Province":"天津","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3271,"ProvinceId":1300000,"Province":"河北省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3272,"ProvinceId":1400000,"Province":"山西省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3273,"ProvinceId":1500000,"Province":"内蒙古自治区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3274,"ProvinceId":1600000,"Province":"辽宁省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3275,"ProvinceId":1700000,"Province":"吉林省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3276,"ProvinceId":1800000,"Province":"黑龙江省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3277,"ProvinceId":1900000,"Province":"上海","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3278,"ProvinceId":2000000,"Province":"江苏省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3279,"ProvinceId":2100000,"Province":"浙江省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3280,"ProvinceId":2200000,"Province":"安徽省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3281,"ProvinceId":2300000,"Province":"福建省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3282,"ProvinceId":2400000,"Province":"江西省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3283,"ProvinceId":2500000,"Province":"山东省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3284,"ProvinceId":2600000,"Province":"河南省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3285,"ProvinceId":2700000,"Province":"湖北省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3286,"ProvinceId":2800000,"Province":"湖南省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3287,"ProvinceId":2900000,"Province":"广东省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3288,"ProvinceId":3000000,"Province":"广西壮族自治区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3289,"ProvinceId":3100000,"Province":"海南省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3290,"ProvinceId":3200000,"Province":"重庆","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3291,"ProvinceId":3300000,"Province":"四川省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3292,"ProvinceId":3400000,"Province":"贵州省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3293,"ProvinceId":3500000,"Province":"云南省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3294,"ProvinceId":3600000,"Province":"西藏自治区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3295,"ProvinceId":3700000,"Province":"陕西省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3296,"ProvinceId":3800000,"Province":"甘肃省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3297,"ProvinceId":3900000,"Province":"青海省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3298,"ProvinceId":4000000,"Province":"宁夏回族自治区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3299,"ProvinceId":4100000,"Province":"新疆维吾尔自治区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3300,"ProvinceId":4200000,"Province":"台湾省","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3301,"ProvinceId":4300000,"Province":"香港特别行政区","CountyId":0,"lockey":0,"loclevel":0},{"LocationId":3302,"ProvinceId":4400000,"Province":"澳门特别行政区 ","CountyId":0,"lockey":0,"loclevel":0}]
市的返回数据格式:
[{"LocationId":2920,"ProvinceId":0,"City":"石家庄市","CityId":130100,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"唐山市","CityId":130200,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"秦皇岛市","CityId":130300,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"邯郸市","CityId":130400,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"邢台市","CityId":130500,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"保定市","CityId":130600,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"张家口市","CityId":130700,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"承德市","CityId":130800,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"沧州市","CityId":130900,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"廊坊市","CityId":131000,"CountyId":0,"lockey":0,"loclevel":0},{"LocationId":2920,"ProvinceId":0,"City":"衡水市","CityId":131100,"CountyId":0,"lockey":0,"loclevel":0}]
easy ui 下拉级联效果 ,下拉框绑定数据select控件的更多相关文章
- easy ui 下拉框绑定数据select控件
easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td&g ...
- Jquery+json绑定带层次下拉框(select控件)
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- Asp.net绑定带层次下拉框(select控件)
1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...
- IE6下div层被select控件遮住的问题解决方法
Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...
- 模拟select控件&&显示单击的坐标&&用户按下键盘,显示keyCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE6/7下Select控件Display属性无效解决办法
HTML的Select控件,C#的DropDownList服务器控件 设置父类型Display属性之后,在IE6/7上无效 直接将下段javascript脚本添加到页面中即可 <script t ...
- MFC的组合框(ComboBox)控件切换下拉样式
由于课题的需求需要做MFC串口程序,看了百度下载的串口助手的界面风格,发现这个设计很好 波特率的组合框只给出了5个可选数值,然后第6个选项是Custom,即手动输入. 实际上DCB结构的BaudRat ...
- WPF MVVM模式下ComboBox级联效果 选择第一项
MVVM模式下做的省市区的级联效果.通过改变ComboBox执行命令改变市,区. 解决主要问题就是默认选中第一项 1.首先要定义一个属性,继承自INotifyPropertyChanged接口.我这里 ...
- jquery ui 与 easy ui同时引入 展示效果冲突的问题
jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件
随机推荐
- centos7重置root开机登录密码
今天忘记了centos7 root登录的密码,本来要好好的做个图文的教程也好啊,但是忘记截图什么的,就不在重复的工作了, 参考了下面的两个链接重置了密码,结合使用效果更好哦,嘿嘿.. 下次要是再遇到这 ...
- [改善Java代码]避开基本类型数组转换列表陷阱
开发中经常用到Arrays和Collections这两个工具类. 在数组和列表之间进行切换.非常方便.但是也会遇到一些问题. 看代码: import java.util.Arrays; import ...
- 转:OpenResty最佳实践(推荐了解lua语法)
看点: 1. Lua 语法的说明, 排版清晰易懂. 转: https://moonbingbing.gitbooks.io/openresty-best-practices/content/lua/m ...
- Jersey(1.19.1) - Client API, Overview of the API
To utilize the client API it is first necessary to create an instance of a Client, for example: Clie ...
- sqlserver 公有表达式
了解通用表达式: 为了让代码简洁:在一个查询中引用另外的结果集都是通过视图而不是子查询来进行分解,但是视图是系统级对象,如果数据集仅仅需要在存储过程或是自定义函数中使用一次的话,使用view有些奢侈哈 ...
- svn 服务器的搭建 on Ubuntu
Subversion 如何在Ubuntu下安装配置Subversion服务器.已经配置好,不过没有配置开机自启动, 需要的时候,使用如下命令开启svn服务svnserve -d -r /opt/s ...
- CoreAnimation 核心动画二 锚点
锚点: anchorPoint 以锚点为中心 执行动画 (与 渔夫固定船的点时一致的) anchorPoint 默认是 0.5,0.5 (注意: 锚点 是一个比例) anchorPoint ...
- Amoeba相关产品及其介绍
Amoeba for MySQL Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专注 分布式数据库 ...
- Sublime Text 3初体验之Package Control
http://www.imooc.com/article/12616 下面介绍几款Sublime Text 常用Package 1.Emmit 2.JavaScript & NodeJS Sn ...
- 第一节 Hibernate 基本配置
1 新建maven工程 1)打开eclipse,依次点击File---->New---->Maven Project. 2)选择org.apache.maven.archetypes ma ...