省市区 联动(编辑回显)小例

Posted 个子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区 联动(编辑回显)小例相关的知识,希望对你有一定的参考价值。

   <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-10 form-inline">
                                <input type="hidden" value="${(logistics.province)}" id="sProvince">
                                <input type="hidden" value="${(logistics.city)}" id="sCity">
                                <input type="hidden" value="${(logistics.county)}" id="sCountry">
                                <select class="form-control" id="province" name="province"></select>
                                <select class="form-control" id="city" name="city"></select>
                                <select class="form-control" id="country" name="county"></select>
                            </div>
                        </div>
                     
<script src="/plugins/provincesCity.js"></script>
<script>
$(function () {

initProvince();
})
</script>
function initProvince() {
    var province = $("#province");
    var city = $("#city");
    var county = $("#country");
    var preProvince = "<option value=\\"\\">选择省(市)</option>";
    var preCity = "<option value=\\"\\">选择市(区)</option>";
    var preCounty = "<option value=\\"\\">选择区(县)</option>";

    //初始化
    province.html(preProvince);
    city.html(preCity);
    county.html(preCounty);

    //加载省下拉列表
    $.ajax({
        type: "POST",
        url: "/system/province/selectProvinces",
        data: {"levelNum": 1}, // 省级别
        dataType: \'json\',
        success: function (data) {
            $.each(data, function (i) {
                if ($("#sProvince").val() == data[i].code) {
                    province.append("<option value=" + data[i].code + " selected=\\"selected\\">" + data[i].name + "</option>");
                    province.trigger("change");
                }
                province.append("<option value=" + data[i].code + ">" + data[i].name + "</option>");
            });
        }, error: function () {
            alert("错了");
        }
    });

    //省 下拉选择发生变化触发的事件
    province.change(function () {
        //province.val() : 返回是每个省对应的下标,序号从0开始
        if (province.val() != "") {
            city.html(preCity);
            var levelNum = 2;//市级别
            $.ajax({
                type: "POST",
                url: "/system/province/selectProvinces",
                data: {levelNum: levelNum, parentCode: province.val()},
                dataType: \'json\',
                success: function (data) {
                    $.each(data, function (i) {
                        if ($("#sCity").val() == data[i].code) {
                            city.append("<option value=" + data[i].code + " selected=\\"selected\\">" + data[i].name + "</option>");
                            city.trigger("change");
                        }
                        city.append("<option value=" + data[i].code + ">" + data[i].name + "</option>");
                    });
                }, error: function () {
                    alert("错了");
                }
            });


        }
    });

    //市 下拉选择发生变化触发的事件
    city.change(function () {
        county.html(preCounty);
        if (city.val() != "") {
            var levelNum = 3; //区级别
            $.ajax({
                type: "POST",
                url: "/system/province/selectProvinces",
                data: {levelNum: levelNum, parentCode: city.val()},
                dataType: \'json\',
                success: function (data) {
                    $.each(data, function (i) {
                        if ($("#sCountry").val() == data[i].code) {
                            county.append("<option value=" + data[i].code + " selected=\\"selected\\">" + data[i].name + "</option>");
                        }
                        county.append("<option value=" + data[i].code + ">" + data[i].name + "</option>");
                    });
                }, error: function () {
                    alert("错了");
                }
            });
        }
    });
}
 <sql id="Base_Column_List">
id, code, name, parent_code, level_num, order_num, createBy, createDate, updateBy,
updateDate, remarks, delFlag
</sql>
<select id="selectProvinces" resultMap="BaseResultMap" parameterType="java.lang.String">
select
<include refid="Base_Column_List"/>
from sys_province_info
<where>
<if test="sysProvinceInfo.levelNum != null and sysProvinceInfo.levelNum!= \'\'">
and level_num = #{sysProvinceInfo.levelNum}
</if>
<if test="sysProvinceInfo.parentCode != null and sysProvinceInfo.parentCode!= \'\'">
and parent_code = #{sysProvinceInfo.parentCode}
</if>
</where>
order by pinyin
</select>

 


以上是关于省市区 联动(编辑回显)小例的主要内容,如果未能解决你的问题,请参考以下文章

Vue 含有"不限"的省市区三级联动的组件

Vue 含有"不限"的省市区三级联动的组件

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug