EasyUI使用笔记——Combobox级联

@老徐  December 19, 2015

我用的下面这方式:

<label>所在城市:</label>
<input class="easyui-combobox" id="s_province" name="province" />
<input class="easyui-combobox" id="s_city" name="city" />

之后JS代码:

<script type="text/javascript">
    $(function () {
        //设置城市的combobox
        var city = $('#s_city').combobox({
            valueField: 'REGION_ID',    //绑定value字段
            textField: 'REGION_NAME',    //绑定text字段
            editable: false    //是否可编辑
        });
        
        //设置省份的combobox
        $('#s_province').combobox({
            url: '/api/Ajax/Region?id=1',    //异步的URI,返回的是JSON格式
            valueField: 'REGION_ID',    //绑定value字段
            textField: 'REGION_NAME',    //绑定text字段
            editable:false,    //是否可编辑
            onSelect: function (params) {    //选择后触发
                $.ajax({
                    url: '/api/Ajax/Region?id=' + params.REGION_ID,
                    data: {},
                    type: 'Post',
                    dataType: 'json',
                    success: function (data) {
                        city.combobox("clear").combobox('loadData', data);    //清除city的原数据并绑定新数据
                    }
                });
            }
        });

    });

</script>

效果如下:
201607231469241139251583.png

201607231469241171955009.png


添加新评论