文档章节

distpicker三级联动,动态改变省市信息

o
 osc_odyg6b92
发布于 2018/07/13 15:05
字数 330
阅读 65
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

 

一、引入3个js文件

  <script type="text/javascript" src="js/distpicker.data.js"></script>

  <script type="text/javascript" src="js/distpicker.js"></script>

  <script type="text/javascript" src="js/main.js"></script>

二、页面展示

代码:

<div class="form-group">
                            <label class="col-lg-1 col-sm-1 control-label">通讯地址<font color="red">*</font></label>
                            <div class="col-lg-4 distpicker" data-toggle="distpicker">
                                <select id="province" name="province" data-province="---- 选择省 ----"></select>
                                <select id="city" name="city" data-city="---- 选择市 ----"></select>
                                <select id="district" name="district" data-district="---- 选择区 ----"></select>
                            </div>
                            <label class="col-lg-1 col-sm-1 control-label">通讯地址补充信息<font color="red">*</font></label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="addressExtra" placeholder="住址" value="${(empList.address_extra)!''}" name="addressExtra" >
                            </div>
                        </div>

初始化选项框的数据为选择省市区

$('.distpicker').distpicker('reset', true);
$('.distpicker1').distpicker('reset', true);

三、动态获取数据的三级联动

代码:

var province = "${(empList.province)!''}";
        var city = "${(empList.city)!''}";
        var district = "${(empList.district)!''}";
   
        if(province!=null){
            var numbers = $("#province").find("option"); //获取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == province) {
                    $(numbers[j]).attr("selected", "selected");
                    $('.distpicker').distpicker('output','city');//收到省的数据,市里面获取到这个省的所有市的名称
                }
            }
        }
        if(city!=null){
            var numbers = $("#city").find("option"); //获取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == city) {
                    $(numbers[j]).attr("selected", "selected");
                    $('.distpicker').distpicker('output','district');
                }
            }
        }
        if(district!=null){
            var numbers = $("#district").find("option"); //获取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == district) {
                    $(numbers[j]).attr("selected", "selected");
                }
            }
        }

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
代码生成器--Codgen

Codgen是一个基于数据库元数据模型,使用freemarker模板引擎来构建输出的代码生成器。freemarker的数据模型结构通常来说都是一个Map树状结构模型,codgen也不例外,它的数据模型这棵树的根节...

黄天政
2013/01/29
1.4W
2
Swing界面分析和调试工具--Swing Inspector

Swing Inspector是一个Java Swing/AWT用户界面分析和调试工具,功能与firebug类似,具有强大的Swing/AWT用户界面分析和调试相关功能。 适用于从java swing初级到高级的所有开发人员,能够快速...

匿名
2013/03/06
3.4K
0
硬实时操作系统--Raw OS

Raw-OS 起飞于2012年,Raw-OS志在制作中国人自己的最优秀硬实时操作系统。 Raw-OS 操作系统特性 内核最大关中断时间无限接近0us, s3c2440系统最大关中断时间实测0.8us。 支持idle任务级别的事...

jorya_txj
2013/03/19
6.3K
1
Hadoop 资源管理器--Apache YARN

Apache Hadoop YARN (Yet Another Resource Negotiator,另一种资源协调者)是一种新的 Hadoop 资源管理器,前不久被提升为高层次的Hadoop子项目。 YARN最初是为了修复MapReduce实现里的明显...

匿名
2012/12/20
3.5K
0
HTML动态嵌入Flash--embedSWF

embedSWF 是一个轻量的HTML动态嵌入Flash的方案。gzip之前,仅3kb大小!比swfobject要小很多。 简洁的API,所有object和embed标记支持的参数都通过一个options传递。甚至支持在options中传递...

JonyZhang
2013/05/01
5K
2

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
12分钟前
0
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
0
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
12分钟前
0
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部