我用的下面这方式：

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

效果如下：

本文作者：老徐

本文链接：https://bigger.ee/archives/180.html

转载时须注明出处及本声明