EasyUI easyui-combobox实现数据联动

实现效果:当用户选择了调查地区以后,只显示当前选择地区的频道,如果没有选择地区,那么频道下拉列表是空的。实现效果,如下

一、定义easyui-combobox控件

    <table>
        <tr>
            <th class="style1">
                调查地区:
            </th>
            <td>
                <input id="cmbNetWork" class="easyui-combobox" name="dept" data-options="editable:false" />
            </td>
            <th class="style1">
                频道:
            </th>
            <td>
                <input id="cmbFmName" class="easyui-combobox" name="cmbFmName" data-options="editable:false" />
            </td>
        </tr>
    </table>

二、javascript操作easyui-combobox的语法,绑定地区数据源,当选择地区以后触发loadCmbFM()方法,绑定频道数据源。

        $(document).ready(function () {
            //加载地区信息
            var cbotemplte = $("#cmbNetWork");
            cbotemplte.combobox({
                url: "AjaxHandler/RadioCommon.ashx?action=bindNetwork",//对应提供数据源的ashx页面
                valueField: 'CNETWORKID',//绑定字段ID
                textField: 'CNETWORKNAME',//绑定字段Name
                onSelect: function (row) {
                    loadCmbFM(row.CNETWORKID);//执行选择操作后执行,row.CNETWORKID是当前选中行的地区ID
                }
            });
            function loadCmbFM(networkID) {//根据地区ID绑定频道信息
                $("#cmbFmName").combobox({
                    url: "AjaxHandler/RadioCommon.ashx?action=fmByNetworkID&networkID=" + networkID,
                    valueField: 'CFM_ID',
                    textField: 'CFM_CNAME'
                });
            }
        })
    </script>

 

posted @ 2016-08-26 14:20  高空燕子飞过  阅读(432)  评论(0编辑  收藏  举报