zoukankan      html  css  js  c++  java
  • 省市区 联动(编辑回显)小例

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

    
    
  • 相关阅读:
    逻辑实现与物理实现
    逻辑实现与物理实现
    可逆矩阵的逆
    可逆矩阵的逆
    算法 Tricks(三)—— 判断序列是否为等差数列
    算法 Tricks(三)—— 判断序列是否为等差数列
    C++ Tricks(一)—— 判断字符串 string 对象的所有字符都相等
    AndroidMainifest标签使用说明3——&lt;activity-alias&gt;
    支持向量机通俗导论(理解SVM的三层境地)
    iOS中,MRC和ARC混编
  • 原文地址:https://www.cnblogs.com/jwlfpzj/p/7469251.html
Copyright © 2011-2022 走看看