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

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

				
时间: 2024-10-12 11:50:27

省市区 联动(编辑回显)小例的相关文章

使用Dropzone上传图片及回显演示样例

一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12"> <form dropzone2 class="dropzone" enctype="multipart/form-data" method="post"></form> </div> </div&

EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题

描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 :  问题总是有的.  在使用过程中,遇到EasyUI的window窗口中使用kindeditor编辑框,点击打开之后,在IE9中不能回显(修改功能).获得焦点编辑. 其他IE版本.火狐.chrome等常用浏览器都没问题. 问题原因 : 经过跟踪调试测试,初步了解问题原因在于,页面EasyUI和kindeditor样式加载顺序不一致,对应的ID选择器

telnet的回显编辑

win7上telnet的开启与使用: 1  开启telnet client: 2.进入DOS,输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 ,回车 80端口是为HTTP(HyperText Transport Protocol)即超文本传输协议开放的,此为上网冲浪使用次数最多的协议,主要用于WWW(World Wide Web)即万维网传输信息的协议.可以通过HTTP地址(即常说的“网址”)加“:80”来访问网站,因为浏览网页服务默认的端口号都是80,

编辑数据-表单回显

最近做的项目中,在对单表进行增删改查的时候,对于数据的编辑都使用了数据回显. 具体使用环境: 列表页面:main.jsp,借助easy-ui的datagrid表格列表显示数据库中查询的数据.选中某条记录进行编辑,在弹出的编辑框-form.jsp中,将选中的数据利用封装的方法,将数据显示到相应的控件上.看两张截图: 实现流程: main.jsp页面-js方法 function edit(){ if($("#grid").datagrid("getSelected")=

Nginx实现图片回显

在全国项目峰会的时候,自己的项目因为上传的图片没回显还在纳闷怎么弄..... 现在知道了用Nginx反向代理就能够完成此功能. (一) 反向代理机制 业务需求: 用户上传的图片和用户请求图片的网址有差别. 磁盘路径: E:\zhangchaocai\2018\11\02\abc.jpg 虚拟路径: http://image.jt.com\2018\11\02\abc.jpg 如何将虚拟路径地址正确的映射到磁盘路径中??? (二) 反向代理说明 找到一个好用的画图软件,简单易用才是王道.FastS

客户端调用 CMD 命令并回显结果。

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Text.RegularExpressions; using System.Windows.Forms; using Syste

省市区联动

学习JS遇到做省市区联动控件,以下是自己的一些心得. <body><select id="province" onchange="chooseProvince(this)"> <option value="1">请选择省</option></select><select id="city" onchange="chooseCity(this)"

vue 运用ElementUI,做select下拉框回显

第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. 一下是截图:

Form标签表单回显与提交

SpringMVC虽然没有struts2那样强大的标签库,但是form标签也同样实用 1.javabean片段 public class User implements Serializable{ private static final long serialVersionUID = -1684752473484153239L; private String id; private String dept; private String account; private String name