三级联动

这里写图片描述

引入插件的css和js代码:

<link href="./css/LArea.css" rel="stylesheet" >
<script src="./js/LAreaData1.js"></script>
<script src="./js/LArea.js"></script>

html代码:

            <div class="form-com area"><label for="">区域:</label><input type="text" id="demo1" value="" readonly placeholder="区域选择"><input type="hidden" id="value1" name="">           </div>

获取后端返回的数据源和初始化插件:

// 获取三级联动的数据function getliandong(callback){// Action=GetAllRegions&UserId=79651$.ajax({                type: "POST",               url: 'http://ptest.liby.com.cn/MessageTransfer.php?c=message&m=uatjson',dataType:"jsonp",// timeout : 50000,data:{posdata:{Action:'GetAllRegions',UserId:''},  },  success: function(data){// alert(data);data = JSON.parse(data);// console.dir(data);callback(data);// return data;} ,});}// 将三级联动的数据渲染到插件中var sanji = '';getliandong(function(data){sanji = data['data'];var list = [];var provs_data = [];var tmpj = 0;$.each(sanji,function(i){if(sanji[i]['Depth'] == 1){provs_data[tmpj] = {'text':sanji[i]['RegionName'],'value':sanji[i]['RegionId']}; tmpj++;}});var citys_data = {};$.each(provs_data,function(k){var arr = [];var tmpi = 0;$.each(sanji,function(j){if(sanji[j]['Depth'] == 2 && sanji[j]['ParentId'] == provs_data[k]['value']){arr[tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};// citys_data[sanji[j]['ParentId']] = arr;// citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};tmpi++;}});citys_data[provs_data[k]['value']] = arr;});var tmp2 = [];var tmpm = 0;$.each(sanji,function(m){if(sanji[m]['Depth'] == 2){tmp2[tmpm] = {'text':sanji[m]['RegionName'],'value':sanji[m]['RegionId']}; tmpm++;}});var dists_data = {};$.each(tmp2,function(l){var tmpk = 0;var arr = [];$.each(sanji,function(h){if(sanji[h]['Depth'] == 3 && sanji[h]['ParentId'] == tmp2[l]['value']){arr[tmpk] = {'text':sanji[h]['RegionName'],'value':sanji[h]['RegionId']};// citys_data[sanji[j]['ParentId']] = arr;// citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};tmpk++;}});dists_data[tmp2[l]['value']] = arr;});// delete citys_data['8822'];// 三级联动的初始化var area2 = new LArea();area2.init({'trigger': '#demo1','valueTo': '#value1','keys': {id: 'value',name: 'text'},'type': 2,'data': [provs_data, citys_data, dists_data]});});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Attribute “singleton” must be declared for element type “bean”.

文章目录一、分析定位1.异常现象2.分析定位二、解决方案2.1.找坐标2.3. 找jar包2.3. 打开jar包2.4. 找目录2.5. 编辑xfire.xml2.6. 编辑xfireXmlBeans.xml一、分析定位 1.异常现象 Attribute “singleton” must be declared for element type “bean”. 2.分析定位 因为&a…

高德JS依赖分析工程及关键原理

一、背景 高德 App 进行 Bundle 化后&#xff0c;由于业务的复杂性&#xff0c;Bundle 的数量非常多。而这带来了一个新的问题——Bundle 之间的依赖关系错综复杂&#xff0c;需要进行管控&#xff0c;使 Bundle 之间的依赖保持在架构设计之下。 并且&#xff0c;为了保证 Bu…

为了这个技术,操作系统把 CPU 害惨了!

来源 | 编程技术宇宙责编 | Carol封图 | CSDN 下载自视觉中国内存访问瓶颈我是CPU一号车间的阿Q&#xff0c;前一阵子我们厂里发生了一件大喜事&#xff0c;老板拉到了一笔投资&#xff0c;准备扩大生产规模。不过老板挺抠门的&#xff0c;拉到了投资也不给我们涨点工资&#x…

一个周内上线50个增长策略,竟然能这么高效!

导读&#xff1a;年初的一个晨会上&#xff0c;用户增长负责人湘翁问我说&#xff1a;一个周内上线50个增长策略&#xff0c;技术兄弟们能做到么&#xff1f; 在闲鱼用户增长业务上的实验 闲鱼的用户增长业务具有如下现状&#xff1a; 闲鱼的卖家都是普通小卖家&#xff0c;而…

cannot convert value of type ‘org.codehaus.xfire.spring.editors.ServiceFactoryEditor

文章目录一、分析定位1.异常现象2. 分析定位二、解决方案2.1.找坐标2.3. 找jar包2.3. 打开jar包2.4. 找目录2.5. 编辑customEditors.xml一、分析定位 1.异常现象 cannot convert value of type ‘org.codehaus.xfire.spring.editors.ServiceFactoryEditor 2. 分析定位 原因…

网商银行首席架构师余锋:网商银行的每一笔贷款都是AI贷款

11月28日&#xff0c;在2019年度观察家金融峰会上&#xff0c;网商银行首席架构师余锋表示&#xff0c;网商银行在人工智能领域一直在探索新的应用方向&#xff0c;目前网商银行的每一笔贷款都是AI贷款。 网商银行是国内首家运行在云上的银行&#xff0c;没有线下网点&#xf…

解密 云HBase时序引擎OpenTSDB 优化技术

逝者如斯夫&#xff0c;不舍昼夜。 —— 孔子 时间如流水&#xff0c;一去不复返。自古不乏对时间流逝的感慨&#xff0c;而现代已经有很多技术记录流逝的过去。我们可以拍照&#xff0c;可以录像&#xff0c;当然还可…

官宣!CSDN 重磅发布「AI开源贡献奖Top5」「AI新锐公司奖Top10」「AI优秀案例奖Top30」三大榜单...

2020 年无疑是特殊的一年&#xff0c;AI 在开年的这场“战疫”中表现出惊人的力量。站在“新十年”的起点上&#xff0c;CSDN发起【百万人学AI】评选活动。我们继续聚焦AI的技术落地&#xff0c;关注开源和新生的力量。作为CSDN第三届AI评选活动&#xff0c;本次活动受到数百家…

SpringBoot2 整合 XFIRE 服务端和客户端

文章目录一、集成XFIRE1. 版本选型2. 导入依赖3. 注入XFireSpringServlet4. 创建一个xml文件5. 使用ImportResource注入xml6. 创建WebService接口6. 创建实现类7. 添加配置类8. 工具类二、XFIRE 发布服务2.1. 运行项目2.2. 异常解决2.3. 测试验证三、XFIRE客户端开源源码.一、集…

css3动画过渡按钮

css(css代码是网上找的)和html代码&#xff1a; .mui-switch {width: 52px;height: 31px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;border-top-left-radius: 20px;border-top-right-ra…

阿里云上万个 Kubernetes 集群大规模管理实践

内容简介&#xff1a; 阿里云容器服务从2015年上线后&#xff0c;一路伴随并支撑双十一发展。在2019年的双十一中&#xff0c;容器服务ACK除了支撑集团内部核心系统容器化上云和阿里云的云产品本身&#xff0c;也将阿里多年的大规模容器技术以产品化的能力输出给众多围绕双十一…

SpringBoot2 整合 AXIS 服务端和客户端

文章目录一、服务端1. 版本选型2.导入依赖3. SERVLET4. 接口5.实现类6. 配置工厂7.启动类8. WEB-INF目录18. WEB-INF目录29. /目录19. /目录210. wsdd11. 测试验证二、客户端开源源码.一、服务端 1. 版本选型 阿健/框架版本spring-boot2.5.4axis1.4axis-jaxrpc1.4commons-dis…

地理文本处理技术在高德的演进(下)

在【上篇】里&#xff0c;我们介绍了地理文本处理技术在高德的整体演进&#xff0c;选取了几个通用query分析的点进行了介绍。下篇中&#xff0c;我们会选取几个地图搜索文本处理中特有的文本分析技术做出分析&#xff0c;包括城市分析&#xff0c;wherewhat分析&#xff0c;路…

真正拿大厂offer的人,都赢在这一点

学好一门技术最有价值的体现就是“面试”&#xff0c;对于大部分人来说 “面试”是涨薪的主要途径之一&#xff0c;因此我们需要认真的准备面试&#xff0c;因为它直接决定着你今后几年内的薪资水平&#xff0c;所以在面试这件事上花费再多的时间和精力都是值得的。你会发现有…

今天的这个小成绩,需要向阿里云的朋友报告一下!

今天&#xff0c;想向大家报告一个最新的小成绩&#xff1a; 在数据库领域的权威评选——Gartner全球数据库魔力象限评比中&#xff0c;阿里云成功进入“挑战者”象限&#xff0c;连续两年作为唯一的中国企业入选。 最新评选表明&#xff0c;阿里云过去一年在产品技术领域进展迅…

90%的人会遇到性能问题,如何用1行代码快速定位?

阿里妹导读&#xff1a;在《如何回答性能优化的问题&#xff0c;才能打动阿里面试官&#xff1f;》中&#xff0c;主要是介绍了应用常见性能瓶颈点的分布&#xff0c;及如何初判若干指标是否出现了异常。 今天&#xff0c;齐光将会基于之前列举的众多指标&#xff0c;给出一些常…

SpringBoot2 整合 CXF 服务端和客户端

文章目录一、CXF服务端1. 导入依赖2. 创建service接口3. 接口实现类4. cxf配置类5. 查看wsdl结果二、CXF客户端2.1. 客户端2.2. 断点调试2.3. 发起调用服务开源源码.一、CXF服务端 1. 导入依赖 <properties><cxf.version>3.3.1</cxf.version></propertie…

如果张东升是个程序员,你还有机会吗?

来源 | 编程技术宇宙责编 | Carol封图 | CSDN 下载自视觉中国张东升是一家互联网公司的程序员&#xff0c;一直以来都勤勤恳恳老实工作。可最近一段时间&#xff0c;老板接了几个项目回来&#xff0c;不但开启了996的工作模式&#xff0c;更要命的是频频更改需求&#xff0c;弄…

蚂蚁金服资深总监韩鸿源:企业级数据库平台的持续与创新

2019年11月19日&#xff0c;蚂蚁金服在北京举办“巅峰洞见聚焦金融新技术”发布会&#xff0c;介绍2019双11支付宝背后的技术&#xff0c;并重磅发布全新OceanBase 2.2版本。欢迎持续关注&#xff5e; 蚂蚁金服研究员韩鸿源在发布会分享了《企业级数据库平台的持续与创新》&…

jquery标题左右移动动画

标题会在红框范围内来回移动 html和css代码 <div class"menu-notice" click"check_cart"><div class"menu-notice-logo"></div><div class"menu-notice-title" ref"noticeTitle">{{storeinfo[0] ?…