easyui combobox 省市区三级联动

本文详细介绍了如何在网页中实现省市区联动输入框的功能,包括使用HTML、JS和Ajax进行数据交互,确保用户在选择省份后能自动加载对应的城市和区县。代码示例清晰,易于理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html 部分:

<input type="text" id="txt_province" name="province" class="easyui-combobox easyui-validatebox" data-options="required: true,missingMessage:'请选择省份'" />

<input type="text" id="txt_city" name="city" class="easyui-combobox easyui-validatebox" data-options="required: true,missMessage:'请选择城市'" />

<input type="text" id="txt_area" name="area" class="easyui-combobox easyui-validatebox" data-options="required: true,missMessage:'请选择区县'" />


js部分:

var distinct={

bindcity: function (provins) {
        jQuery.ajaxjson(hurl + '?action=City&provins=' + provins, '', function (cd) {
            cd.unshift({ "id": 0, "text": "未配置", "selected": true });   //初始化值
            top.$('#txt_city').combobox({
                data: cd,
                valueField: 'id',
                textField: 'text',
                editable: false,
                //required: true,
                onSelect: function (cityoption) {
                    if (cityoption.id != 0) {      //判断值,为初始值清空县的下拉值,之前用combobox("clear")发现省换了后县还有下拉,就改传空值
                        CRUD.bindcounty(cityoption.id);
                    } else {
                        CRUD.bindcounty(-1);     //清空县的下拉值
                        top.$('#txt_area').combobox('setValue', '未配置');    //初始化下拉值
                    }
                }
            })
        })
    },
    bindcounty: function (city) {
        jQuery.ajaxjson(hurl + '?action=Area&city=' + city, '', function (ad) {
            ad.unshift({ "id": 0, "text": "未配置", "selected": true });
            top.$('#txt_area').combobox({
                data: ad,
                valueField: 'id',
                textField: 'text',
                editable: false
                //required: true
            })
        })
    },

bindprovince: function () {
        //省市区联动
        jQuery.ajaxjson(hurl + '?action=Province', '', function (pd) {
            pd.unshift({ "id": 0, "text": "未配置", "selected": true });
            top.$('#txt_province').combobox({
                data: pd,
                valueField: 'id',
                textField: 'text',
                editable: false,
                //required: true,
                onSelect: function (poption) {
                    CRUD.bindcounty(-1);   //清空县的下拉值
                    top.$('#txt_area').combobox('setValue', '未配置');
                    if (poption.id != 0) {
                        CRUD.bindcity(poption.id);                        
                    } else {
                        CRUD.bindcity(-1);   //清空城市的下拉值
                        top.$('#txt_city').combobox('setValue', '未配置');
                    }
                }                
            })
        })

     }

}


自己随便选值,该清空的都清空了。网上找的其他有差别,还是自己改,感觉很好!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值