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控件的更多相关文章

  1. easy ui 下拉框绑定数据select控件

    easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td&g ...

  2. Jquery+json绑定带层次下拉框(select控件)

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  3. Asp.net绑定带层次下拉框(select控件)

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  4. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  5. 模拟select控件&&显示单击的坐标&&用户按下键盘,显示keyCode

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

  6. IE6/7下Select控件Display属性无效解决办法

    HTML的Select控件,C#的DropDownList服务器控件 设置父类型Display属性之后,在IE6/7上无效 直接将下段javascript脚本添加到页面中即可 <script t ...

  7. MFC的组合框(ComboBox)控件切换下拉样式

    由于课题的需求需要做MFC串口程序,看了百度下载的串口助手的界面风格,发现这个设计很好 波特率的组合框只给出了5个可选数值,然后第6个选项是Custom,即手动输入. 实际上DCB结构的BaudRat ...

  8. WPF MVVM模式下ComboBox级联效果 选择第一项

    MVVM模式下做的省市区的级联效果.通过改变ComboBox执行命令改变市,区. 解决主要问题就是默认选中第一项 1.首先要定义一个属性,继承自INotifyPropertyChanged接口.我这里 ...

  9. jquery ui 与 easy ui同时引入 展示效果冲突的问题

    jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件

随机推荐

  1. javaweb学习总结十四(xml约束之Schema)

    一:schema约束简单介绍 1:xml Schema的定义以及优缺点 2:xml schema入门 3:命名空间 这里http://www.itcast.cn 并没有什么具体的意义,只是命名而已. ...

  2. Oracle procedure 基本语法

    转自:http://lorry1113.javaeye.com/blog/513851 关键字: oracle 存储过程 1.基本结构 CREATE OR REPLACE PROCEDURE 存储过程 ...

  3. WebStorm 8.0安装LESS编译环境的教程

    WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”.对HTML5.Bootstrap框架.Node.js等都有完美支持.目前最新版本为WebSt ...

  4. Ajax具体使用

    Ajax在注册页面经常使用,当注册用户是用户名必须唯一时,要使用ajax获取表单中你输入的内容, 然后将这个数据利用XMLHttpRequest对象请求一个php文件,这个php文件接收到信息,查询数 ...

  5. Linux 命令 - less: LESS IS MORE

    less 程序是为了替换早期 UNIX 中的 more 程序.less 这个名字是对短语 "less is more" 开了个玩笑,该短语是现代派建筑师和设计师们的座右铭. les ...

  6. Android Support v4,v7,v13

    Android Support v4 是最早(2011年4月份)实现的库.用在Android1.6 (API lever 4)或者更高版本之上.它包含了相对V4, V13大的多的功能. 例如:Frag ...

  7. 【转】Github入门教程

    原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句“Hello Github”.YEAH!就是这样. ...

  8. Android之线程终止

    Hanlder是线程与Activity通信的桥梁,利用handler接收到任务线程,放到任务队列里面派对执行. 1.初始化的时候,定义启动的线程为一个守护线程,这样当主线程消亡掉的时候,其他线程也会被 ...

  9. asp.net MVC中使用Html.Checkbox提示该字符串未被识别为有效的布尔值错误的解决方法

    在asp.net MVC中使用Html.CheckBox提交后出现该字符串未被识别为有效的布尔值错误,或从类型“System.String”到类型“System.Boolean”的参数转换失败. 错误 ...

  10. ListView onItemClick(AdapterView<?> parent, View view, int position, long id)参数详解

    public void onItemClick(AdapterView<?> parent, View view, int position, long id) { parent.getA ...