EasyUI中combobox实现市县级联操作

来源：互联网发布：淘宝店铺怎么来搞信誉编辑：程序博客网时间：2024/04/28 08:25

使用combobox自定义的级联下拉列表框：源码如下：

<head>    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="../themes/icon.css">    <link rel="stylesheet" type="text/css" href="../themes/demo.css">    <script type="text/javascript" src="../js/jquery.js"></script>    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    <meta charset="UTF-8">    <title>coboboxTest</title>    <script type="text/javascript">        $(function(){            $('#cityId').combobox({                valueField:'orgNo',                textField:'orgName',                onSelect:function (record) {//                    alert("orgNo:"+record.orgNo +", orgName:"+record.orgName);                    var county = record.county;                    $('#countyId').combobox('clear');                    $('#countyId').combobox('loadData',county);                }            });            $.getJSON('cityJson.json',function(data){                $('#cityId').combobox('loadData',data);//                $('#cityId').combobox('select','41401');                $('#cityId').combobox('select','郑州');            });        });    </script></head><body>    市：    <input type="text" id="cityId" name="cityId"/><br/>    县：    <input type="text" id="countyId" name="countyId" class="easyui-combobox" data-options="valueField:'orgNo',textField:'orgName'"/></body></html>

效果图：

首先：需要引入所需的文件

   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="../themes/icon.css">    <link rel="stylesheet" type="text/css" href="../themes/demo.css">    <script type="text/javascript" src="../js/jquery.js"></script>    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

combobox有两种声明方式，使用

<input type="text" id="countyId" name="countyId" class="easyui-combobox" data-options="valueField:'orgNo',textField:'orgName'"/>

或者使用JS：

$('#cityId').combobox({                valueField:'orgNo',//绑定的数据value                textField:'orgName',//绑定的数据text                onSelect:function (record) {//选中后触发的事件//                  alert("orgNo:"+record.orgNo +", orgName:"+record.orgName);                    var county = record.county;                    $('#countyId').combobox('clear');                    $('#countyId').combobox('loadData',county);//加载县区                }            });

所使用的json数据cityJson.json（若使用后台服务返回数据，只需处理为相同格式即可）

[  {    "orgNo":"41401","orgName":"郑州",    "county":[      {"orgNo":"4140101","orgName":"新郑"},      {"orgNo":"4140102","orgName":"中牟"}    ]  },  {    "orgNo":"41402",    "orgName":"南阳",    "county":[      {"orgNo":"4140201","orgName":"唐河"},      {"orgNo":"4140202","orgName":"卧龙"}    ]  },  {    "orgNo":"41403","orgName":"信阳",    "county":[      {"orgNo":"4140301","orgName":"罗山县"},      {"orgNo":"4140302","orgName":"光山县"}    ]  },  {    "orgNo":"41404","orgName":"洛阳",    "county":[      {"orgNo":"4140401","orgName":"新安县"},      {"orgNo":"4140402","orgName":"伊川县"}    ]  }]

至此，功能完成。

此时，可以根据具体的功能需求，自己创建三级乃至更多级别的级联。

更多easyui api可参考官方文档

0 0