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}]

时间: 2024-10-11 11:41:33

easy ui 下拉级联效果 ,下拉框绑定数据select控件的相关文章

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

easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td> <select id="CompanyDegree" style="width: 150px;"> </select></td> <td>上级或同级:</td> <td> <input

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

1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> 备注:查看源代码 4.后台代码 using System; using System.Data; using System.Web.UI.WebControl

Easy UI Tree某一级别下全部折叠

(折叠前)→(折叠后) 如上图的树形结构,我想让第三级的昭通市下的所有监测区都折叠这时候,我们可以这样做: function collapseTo() { var childs = $('#mytree').tree('getChildren', $('#_easyui_tree_3')); $.each(childs, function (i, v) { if (v) { $('#mytree').tree('collapse', v.target); } }); } Easy UI Tree

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

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

HTML的Select控件,C#的DropDownList服务器控件 设置父类型Display属性之后,在IE6/7上无效 直接将下段javascript脚本添加到页面中即可 <script type="text/javascript">     window.onload = function () {         if (document.getElementsByTagName) {             var s = document.getElements

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

Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但它使弹出的div能浮于select等一些元素之上,因此完美解决了此问题,如下是需要弹出的Div代码,星号内代码为添加的iframe: <div id="quest"> <!--*******************************iframe***********

jquery仿jquery mobile的select控件效果

不说废话,直接上代码 //仿jQuery mobile Select控件 //用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function SelectBox(box,_id,selectvalue,Value) { if(Value != selectvalue) { $("#" + box).html("<input type=hidden value='" + Value + "' id='&qu

仿jquery mobile中的select控件效果

不说废话,直接上代码,最好将on.png和off.png也使用jquery mobile里的图片 //仿jQuery mobile Select控件 //用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function SelectBox(box,_id,selectvalue,Value) { if(Value != selectvalue) { $("#" + box).html("<input type=hidden v