amazeUI 地区选择器三级联动问题解决,带地区数据
2018年5月25号
直接上代码
<div id="area_box"> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择省" id="province"> <option value=""></option> </select> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择市" id="city"> <option value=""></option> </select> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择区/县" id="area"> <option value=""></option> </select> </div> <button class="weui-vcode-btn" id="send">下一步</button>
+$(function() { var $province_value, $city_value, $area_value, $areas_code; $areas_code = 0; $('#area_box div:nth-child(4)').attr('class', 'am-selected am-dropdown hide'); $('#area_box div:nth-child(6)').attr('class', 'am-selected am-dropdown hide'); var $province = $('#province'); var $province_length = areas.length; for(var i = 0; i < $province_length; i++) { var $option = $('<option value="' + i + '">' + areas[i].name + '</option>'); $option.appendTo($province); } $('body').on('click', '#area_box>div:nth-child(2) li', function() { $province_value = $(this).attr('data-value'); var $province_selected = $(this).children().html(); var $city_length = areas[$province_value].sub.length; $('#area_box>div:nth-child(2) .am-selected-status').html($province_selected); $('#city').html('<option value=""></option>'); $('#area').html('<option value=""></option>'); for(var j = 0; j < $city_length; j++) { var $option = $('<option value="' + j + '">' + areas[$province_value].sub[j].name + '</option>'); $option.appendTo($('#city')); } $('#area_box>div:nth-child(4)').attr('class', 'am-selected am-dropdown'); $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown hide'); $areas_code = 1; }); $('body').on('click', '#area_box>div:nth-child(4) li', function() { $city_value = $(this).attr('data-value'); var $city_selected = $(this).children().html(); var $area_length = areas[$province_value].sub[$city_value].sub.length; $('#area_box>div:nth-child(4) .am-selected-status').html($city_selected); $('#area').html('<option value=""></option>'); for(var k = 0; k < $area_length; k++) { var $option = $('<option value="' + k + '">' + areas[$province_value].sub[$city_value].sub[k].name + '</option>'); $option.appendTo($('#area')); } $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown'); $areas_code = 2; }); $('body').on('click', '#area_box>div:nth-child(6) li', function() { $area_value = $(this).attr('data-value'); var $area_selected = $(this).children().html(); $('#area_box>div:nth-child(6) .am-selected-status').html($area_selected); $areas_code = [$province_value, $city_value, $area_value]; }); $('#send').click(function() { if($areas_code == 0) { console.log('请选择省'); } else if($areas_code == 1) { console.log('请选择市'); } else if($areas_code == 2) { console.log('请选择区/县'); } }); });
地区数据满足以下格式
查看所有数据
var areas = [{ "name": "北京", "code": "110000", "sub": [{ "name": "北京市", "code": "110000", "sub": [{ "name": "东城区", "code": "110101" }, { "name": "西城区", "code": "110102" }, { "name": "朝阳区", "code": "110105" }, { "name": "丰台区", "code": "110106" }, { "name": "石景山区", "code": "110107" }, { "name": "海淀区", "code": "110108" }, { "name": "门头沟区", "code": "110109" }, { "name": "房山区", "code": "110111" }, { "name": "通州区", "code": "110112" }, { "name": "顺义区", "code": "110113" }, { "name": "昌平区", "code": "110114" }, { "name": "大兴区", "code": "110115" }, { "name": "怀柔区", "code": "110116" }, { "name": "平谷区", "code": "110117" }, { "name": "密云县", "code": "110228" }, { "name": "延庆县", "code": "110229" }] }] }, { "name": "天津", "code": "120000", "sub": [{ "name": "天津市", "code": "120000", "sub": [{ "name": "和平区", "code": "120101" }, { "name": "河东区", "code": "120102" }, { "name": "河西区", "code": "120103" }, { "name": "南开区", "code": "120104" }, { "name": "河北区", "code": "120105" }, { "name": "红桥区", "code": "120106" }, { "name": "东丽区", "code": "120110" }, { "name": "西青区", "code": "120111" }, { "name": "津南区", "code": "120112" }, { "name": "北辰区", "code": "120113" }, { "name": "武清区", "code": "120114" }, { "name": "宝坻区", "code": "120115" }, { "name": "滨海新区", "code": "120116" }, { "name": "宁河县", "code": "120221" }, { "name": "静海县", "code": "120223" }, { "name": "蓟县", "code": "120225" }] }] }];
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
微信小程序输入地址自动获取经纬度
腾讯位置服务官网:http://lbs.qq.com/index.html SDK下载地址:http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip 微信小程序JavaScript SDK文档地址:http://lbs.qq.com/qqmap_wx_jssdk/index.html 地址解析坐标API文档地址:http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html 申请密钥(key)这里就不讲了。 1、选择SDK为微信小程序JavaScript SDK 微信小程序JavaScript SDK 2、下载SDK,下载完后解压,把下载的包解压并复制文件到项目文件夹。 下载SDK 制文件到项目文件夹 3、到要使用的页面js引入SDK文件,并实例化API核心类 // 引入SDK核心类 import QQMapWX from 'xxx/qqmap-wx.js'; // 实例化API核心类 let qqMap = new QQMapWX({ key: '开发密钥(key)' // 必...
- 下一篇
JVM Profiler StacktraceCollectorProfiler
开篇 StacktraceCollectorProfiler主要用来采集线程的调用栈,原理是通过ManagementFactory.getThreadMXBean()返回的ThreadMXBean对象来实现。 源码分析 public void profile() { // 获取此刻所有线程的dump信息 ThreadInfo[] threadInfos = threadMXBean.dumpAllThreads(false, false); if (threadInfos == null) { return; } // 遍历线程信息并处理每个线程 for (ThreadInfo threadInfo : threadInfos) { String threadName = threadInfo.getThreadName(); if (threadName == null) { threadName = ""; } if (!ignoreThreadNamePrefix.isEmpty() && threadName.startsWith(ignoreThreadNa...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果