精华内容
下载资源
问答
  • 微信小程序实现两级联动 首先模拟数据 (在utils 文件夹下创建 js 文件 ) (注:最外层的value 与内部孩子模块的field1一致) module.exports = [ { "value": "001", "name": "肃州区", "list": [{ ...

    微信小程序实现两级联动

    • 首先模拟数据 (在utils 文件夹下创建 js 文件 )
      • 注:最外层的value 与内部孩子模块的field1一致
    module.exports = [
    	{
    	  "value": "001",
    	  "name": "肃州区",
    	  "list": [{
    	      "value": "1",
    	      "name": "测试1",
    	      "field1": "001"
    	    },
    	    {
    	      "value": "2",
    	      "name": "测试2",
    	      "field1": "001"
    	    }]
    	},
    	{
    	  "value": "002",
    	  "name": "金塔县",
    	  "list": [{
    	      "value": "3",
    	      "name": "测试1",
    	      "field1": "002"
    	    },
    	    {
    	      "value": "4",
    	      "name": "测试2",
    	      "field1": "002"
    	    }]
    	}
    ];
    
    • 在需要使用的页面进行引入(index.js)
    var pcsList = require('../../../utils/pcs');  // 路径根据自己的文件夹进行修改
    
    • 使用步骤如下 (index.wxml)
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiObjArray}}" range-key="{{'name'}}" data-value="">
      <view class="picker">
        <text style="width:180rpx"></text>
        {{multiObjArray[0][multiIndex[0]].list[multiIndex[1]].name}}
      </view>
    </picker>
    
    • index.js中使用如下
        1. 在data中定义变量
    // picker 二级联动
    multiObjArray: [[], []],
    multiIndex: [0, 0],
    multiObList:[],
    
        1. 初始化数据
    //初始化 pcsList即为外部引用的公共js文件
    that.setData({
       zArray: pcsList,
       'multiObjArray[0]': pcsList,
       'multiObjArray[1]': pcsList[0].list,
     })
    
        1. 两个下拉选择出发的方法如下
    
      // 选择区县下拉
      bindMultiPickerChange: function (e) {
        //根据自己要实现的方法进行修改赋值
        console.log(this.data.multiObjArray[1][e.detail.value[1]],"~~~~~~~~")
        this.setData({
          multiIndex: e.detail.value,
        })
      },
      // 选择区县对应的派出所
      bindMultiPickerColumnChange: function (e) {
         console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        //根据自己要实现的方法进行修改赋值
        if (e.detail.column == 0) { // 如果不进行选择的时候
          this.setData({
            'multiObjArray[1]': this.data.zArray[e.detail.value].list,
          });
        }
      },
    
    展开全文
  • Java代码实现两级联动

    2021-02-26 11:50:17
    【实例简介】实现页两级联动,一般都是在html或jsp等里面写的,我写的是在java中的。【实例截图】【核心代码】Java代码实现二级联动└── 用Java代码实现二级联动├── city.sql└── webcity├── src│ └──...

    【实例简介】

    实现页两级联动,一般都是在html或jsp等里面写的,我写的是在java中的。

    【实例截图】

    【核心代码】

    Java代码实现二级联动

    └── 用Java代码实现二级联动

    ├── city.sql

    └── webcity

    ├── src

    │   └── com

    │   └── web

    │   ├── dao

    │   │   └── CityDAO.java

    │   ├── dwr

    │   │   └── City.java

    │   └── util

    │   └── DBUtil.java

    └── WebRoot

    ├── city.jsp

    ├── index.jsp

    └── WEB-INF

    ├── classes

    │   └── com

    │   └── web

    │   ├── dao

    │   │   └── CityDAO.class

    │   ├── dwr

    │   │   └── City.class

    │   └── util

    │   └── DBUtil.class

    ├── dwr.xml

    ├── lib

    │   ├── classes12.jar

    │   ├── commons-logging.jar

    │   └── dwr.jar

    ├── META-INF

    │   └── MANIFEST.MF

    └── web.xml

    18 directories, 15 files

    展开全文
  • 本篇文章会记录如何完成地图两级联动,以及过程中遇到的一些问题,希望能帮到大家! 1、环境 注意:echarts.min.js是本地文件,你可以去echarts官网下载,也可以直接去我后面发布的实例里找。 2、分类 利用文件命名...

     

          本篇文章会记录如何完成地图两级联动,以及过程中遇到的一些问题,希望能帮到大家!

    1、环境 

     <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript" src="echarts.min.js"></script>

    注意:echarts.min.js是本地文件,你可以去echarts官网下载,也可以直接去我后面发布的实例里找。

    2、分类

           利用文件命名的方式确定好要绘制地区的层级关系,并且绘制重庆市地图,你就先获得重庆市下各个区的边界坐标然后拼接成重庆地图,准备绘制区地图就要获得乡镇级别的边界坐标然后拼接成整体。具体情况如下:

           重庆市要装的是各个区县的坐标数据,长寿区,忠县等文件夹装的是各自的乡镇级别的坐标数据。

    3、获取边界坐标

           下载”bigemap”或其他地图软件,然后根据第一步下载需要的地区边界坐标到分好类的文件夹里,文件后缀为”.kml”。本次用的是“bigemap”:

    4、检查kml文件

          有了坐标我们还不能直接拼接地图,因为有的区域划分会有很多小块闭合的区域,echarts无法绘制出由kml文件内部衔接起的多个闭合的区域坐标,不然在绘制地图的时候会报错:

    Invalid geoJson format Cannot read property ‘length’ of undefined。

          所以在拼接地图生成对应的json文件之前需要确保一个kml文件里只有一个<Polygon></Polygon>标签,我们直接把kml文件在文本编辑器打开,利用ctrl+f查询的方式整理后,来看有多少个<Polygon>标签,有多个时就新建kml文件把原文件拆分开来。下面是拆分前后的样子:

    拆分前

    拆分后

    注意:拆分的时候一定要确保几个kml文件只有<Polygon>标签内的内容不一样。

    5、拼接地图生成对应的json文件

          进相关网站,引入kml文件就可以拼接地图了,当你一个文件夹内的区域拼接完了之后,复制右侧的全部代码,粘贴到一个新建的json文件里然后新建“方法名()”的括号里(这是为了解决本地引用时候的跨域问题),方法名跟文件名一致(方便后面调用)。

    拼接

    生成json文件

    6、引入json数据

           第一层地图的数据因为只有一个文件,我选择的是直接通过引入js的方式引进来,不存在跨域问题,但是要在json文件里声名变量名,方便调用数据。

           点击事件引入二级地图数据用ajax然后通过jsonp的形式读取json数据(解决本地引入的跨域问题)。

     $.ajax({
                type: "get",
    		   url:'/ZHZM/javaScript/wis/yxtj/mapdata/'+provinces[params.name]+'.json',
                dataType: 'jsonp',
    			crossDomain: true,
    			jsonp: "callback",
    			jsonpCallback:provinces[params.name],
                success: function(data){
    			 map2Data= [];
    	          for (var i = 0; i < data.features.length; i++) {
    		        map2Data.push({
    			    name: data.features[i].properties.name
    		                 })
    	                }
                echarts.registerMap(params.name, data);
    	        renderMap(params.name, map2Data);
                  },
    				});

           parames.name 是点击事件传进来所点击的区域名称,provinces[]是为了区域名称与对应的文件名称形成映射关系,provinces[ parames.name]表示文件名。

    此处解决跨域的注意点:

    ①jsonp

    crossDomain: true,

    ③生成json文件时,复制的坐标代码放在“方法名()”的括号内,见第五步。

    7、完整的js代码

    var chart = echarts.init(document.getElementById('chongqing-map'));
      var provinces = {
      '大渡口区':'dadukou',
      '巴南区':'banan',
      '北碚区':'beibei',
      '璧山区':'bishan',
      '城口县':'chengkou',
      '大足区':'dazu',
      '垫江县':'dianjiang',
      '丰都县':'fengdu',
      '奉节县':'fengjie',
      '万州区':'wanzhou',
      '涪陵区':'fuling',
      '合川区':'hechuan',
      '江北区':'jiangbei',
      '江津区':'jiangjin',
      '九龙坡区':'jiulongpo',
      '开州区':'kaizhou',
      '梁平区':'liangping',
      '南岸区':'nanan',
      '南川区':'nanchuan',
      '彭水苗族土家族自治县':'pengshui',
      '綦江区':'qijiang',
      '黔江区':'qianjiang',
      '荣昌区':'rongchang',
      '沙坪坝区':'shapingba',
      '石柱土家族自治县':'shizhu',
      '铜梁区':'tongliang',
      '潼南区':'tongnan',
      '巫山县':'wushan',
      '巫溪县':'wuxi',
      '武隆区':'wulong',
      '秀山土家族苗族自治县':'xiushan',
      '永川区':'yongchuan',
      '酉阳土家族苗族自治县':'youyang',
      '渝北区':'yubei',
      '渝中区':'yuzhong',
      '云阳县':'yunyang',
      '长寿区':'changshou',
      '忠县':'zhongxian'
      };
      //加载重庆初始地图
      $(document).ready(function(){
       mapData = [];
        //把json里的name提取出来装入mapData
    	for (var i = 0; i < cq.features.length; i++) {
    		mapData.push({
    			name: cq.features[i].properties.name
    		})
    	};
    	//注册地图
    	echarts.registerMap('重庆', cq);
    	//绘制地图(自己的方法)
    	renderMap('重庆', mapData);
        console.log(cq); 
    	})
    
    
    
    
    //声名全局变量绘制全国地图配置
    var option = {
    	title: {
    		left: 'center',
    		textStyle: {
    			color: '#fff',
    			fontSize: 16,
    			fontWeight: 'normal',
    			fontFamily: "Microsoft YaHei"
    		},
    		subtextStyle: {
    			color: '#ccc',
    			fontSize: 13,
    			fontWeight: 'normal',
    			fontFamily: "Microsoft YaHei"
    		},
    	},
    	tooltip: {
    		trigger: 'item',
    		formatter: '{b}'
    	},
        animation:true,
    	animationDuration: 1000,
    	animationEasing: 'cubicOut',
    	animationDurationUpdate: 1000,
    
    };
    
    //声名绘制地图的函数
    function renderMap(map, data) {
    	//option.title.subtext = map;
    
    	option.series = [{
    		name: map,
    		type: 'map',
    		mapType: map,
    		zoom: 1,
    		hoverAnimation:false,
    		nameMap: {
    			'china': '中国'
    		},
    		label: {
    			emphasis: {
    				show: false
    			}
    		},
    		roam: true,   //设置是否开启拖动与缩放
    		scaleLimit: { //滚轮缩放的极限控制
    	    min: 1,
    	    max: 2.5
    	},
    		itemStyle: {
    			normal: {
    				borderColor: 'rgba(147, 235, 248, 1)',
    				borderWidth: 1,
    				areaColor: {
    					type: 'radial',
    					x: 0.5,
    					y: 0.5,
    					r: 0.8,
    					colorStops: [{
    						offset: 0,
    						color: 'rgba(175,238,238, 0)' // 0% 处的颜色
    					}, {
    						offset: 1,
    						color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
    					}],
    					globalCoord: false // 缺省为 false
    				},
    				shadowColor: 'rgba(128, 217, 248, 1)',
    				shadowOffsetX: -2,
    				shadowOffsetY: 2,
    				shadowBlur: 10
    			},
    			emphasis: {
    				areaColor: '#389BB7',
    				borderWidth: 0
    			}
    		},
    		data: data
    	}];
    
    	//渲染地图
    	chart.setOption(option);
    	//关闭单击事件
    	chart.off("click");
    	//关闭双击事件
    	chart.off("dblclick");
    	//如果在第一层只有单击事件
    	if(map=="重庆"){
    	chart.on('click',function(params){
        chart.clear();
    	console.log(params.name);
    	console.log(provinces[params.name]);
    	 $.ajax({
                type: "get",
    			url:'mapdata/'+provinces[params.name]+'.json',
                dataType: 'jsonp',
    			crossDomain: true,
    			jsonp: "callback",
    			jsonpCallback:provinces[params.name],
                success: function(data){
    			console.log(data);
    			 map2Data= [];
    	          for (var i = 0; i < data.features.length; i++) {
    		        map2Data.push({
    			    name: data.features[i].properties.name
    		                 })
    	                }
                echarts.registerMap(params.name, data);
    	        renderMap(params.name, map2Data);
                  },
    				});
    	});
    	//在第二层双击回第一层
    	}else{
    	chart.on('dblclick', function (params) {
    	chart.clear();	
    	renderMap('重庆', mapData);
    });
    	}
    }

            后面我会把以重庆为实例的完整地图资源发出来(包含区-乡镇的json数据),如有需要的小伙伴可以自行下载。

    展开全文
  • 这次项目有一个需求是实现省市的选择联动,可是uniapp官方提供的组件默认是省市区三的。所以我打算自己模仿uniapp提供的多列选择器写一个符合项目需求的选择器 解决过程 首先这肯定是一个多列选择器 range 在...

    背景

    这次项目有一个需求是实现省市的选择联动,可是uniapp官方提供的组件默认是省市区三级的。所以我打算自己模仿uniapp提供的多列选择器写一个符合项目需求的选择器

    解决过程

    首先这肯定是一个多列选择器

    在这里插入图片描述
    在这里插入图片描述

    range

    在这里可以看到,多列选择器中的数据是放在 range 中的,它是一个二维数组,长度表示列数,每一项表示每一列的数据。
    所以我要把省市处理成下面这样的:

    const a = [['河南省', '山东省'], ['许昌市','郑州市','洛阳市']]
    

    value

    value每一项的值,表示了选择range中对应项的第几个
    例如,我选择了 河南省许昌市,那么 value 的值就是:0 0

    @change

    选中事件

    columnchange

    列选择器滑动的事件

    至此,我有了实现的思路

    1.找到省市的shuj
    2.把省单独放在一个数组中,市放在一个数组中
    3.当我滑动到某个省的时候,把市数组换成相应的数据(这一步有坑)
    4.选中省市后,要把选中的下标也存一份,方便用户再点进来的时候进行回显
    

    解决方法

    1.找到省市数据

    在这里插入图片描述

    2.将省市数据转换为二维数组

    getAddressData() {
    	const that = this;
    	// 所有城市列表,二维数组
    	let cityAllList = [];
    	// 省列表
    	let provinceList = [];
    	// address为省市区的json数据
    	for (let key in address) {
    		let newDataList = [];
    		if (address[key].children) {
    			for (let key2 in address[key].children) {
    				newDataList.push(address[key].children[key2].name);
    			}
    		}
    		provinceList.push(address[key].name);
    		cityAllList.push(newDataList);
    	}
    	that.provinceList = provinceList;
    	that.cityAllList = cityAllList;
    	that.address = [provinceList, cityAllList[0]];
    	//that.address = [provinceList, cityAllList[this.cityList[0]]]; // 考虑回显
    },
    

    维护选择器

    <view class="cu-form-group">
    	<text class="required"></text>
    	<view class="title">所在地区</view>
    	<picker
    		class="pickerS"
    		mode="multiSelector"
    		@change="selCity"
    		@columnchange="selMonitor"
    		:value="cityList"
    		:range="address"
    	>
    		<view class="setAns picker" :class="addressNode.province === '请选择城市' ? 'opcity-half':''">
    			{{ addressNode.province }} {{ addressNode.city ? ','+ addressNode.city : '' }}
    		</view>
    	</picker>
    </view>
    
    // 监听省市区滚动
    selMonitor(e) {
    	const that = this
    	let column = e.detail.column
    	if (column == 0) {
    		let index = e.detail.value
    		let length = that.address[1].length
    		// 改变市
    		that.address[1].splice(0,length, ...that.cityAllList[index])
    	}
    },
    // 选择省市
    // 获取地址信息
    selCity(e) {
    	const that = this;
    	let val = e.target.value
    	this.cityList = val
    	that.addressNode = {
    		province: that.address[0][this.cityList[0]],
    		city: that.address[1][this.cityList[1]]
    	}
    	console.log(val, that.addressNode, '123123123123123')
    }
    

    考虑回显

    在onLoad中,获取用户上次选中的 value 数组,并且存起来

    在执行省市转换数组时,初始化的时候,将市数据列指定为上次选中的列

    that.address = [provinceList, cityAllList[this.cityList[0]]]; //this.cityList保存的是上次用户选择的value数组
    

    至此,就完成了工作

    效果

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 在制作destoon模板的时候,遇到调用地区两级联动,本来是想自己找个插件的。可是仔细一想,还是采用destoon系统内置的方法实现城市地区两级联动。经过自己仔细的研究终于找到了如何实现的方法,下面记录下来,便于...
  • package ...import java.util.ArrayList;import java.util.List;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.gr...
  • var subcat2 = new Array();$i=0;$sql="select * from cat_small ";//查询所有小类$result=mysql_query($sql);while($rs=mysql_fetch_array($result)){echo "subcat2[".$i++."] = new Array('".$rs["id"]."','".$rs...
  • MYSQL二级联动

    2021-01-20 02:35:17
    表数据 查询结果{"电器": [{"1": [{"parent_id": "1","parent_name": "家用电器","son_id": "3","son_name": "大家电"} {"parent_id": "1","parent_name": "家用电器","son_id": "4","son_name": "生活电器"}]} {"2...
  • 1.实现两级下拉框的联动。 功能:实现点击年级下拉框,加载对应科目的下拉框。 第一步:首先要加载年级下拉框中的数据。 01.在GradeDAL层(数据访问层)写一个方法,查询所有年级的信息。 /// <summary> ///...
  • 因为引Jquery太麻烦了,尝试用原生写一个关于省级联动这种类似功能的。实现效果这里想要的效果是如果选择省份,自动出现省份对应的城市首先,后台返回的数据结构是这样子的然后,我要把这些需要展示联动的关键字剥离...
  • php实现二级联动菜单

    2021-04-08 08:14:44
    php实现二级联动菜单php实现二级联动菜单的方法:首先根据大类的值,通过jQuery把值传给后台PHP处理;然后用PHP查询MySQl数据库,得到相应的小类;最后返回JSON数据给前端处理即可。推荐:《PHP视频教程》jq+...
  • vue实现省市二级联动

    2021-10-29 14:20:21
    1、定义个select选项框,一个存放以及下拉列表,一个存放联动下拉列表。 <!--联动选择省份后选择城市--> <el-form-item label="选择省份:"> <el-select size="small" style="width: 100px" ...
  • uni-app项目中左右两级列表联动功能

    千次阅读 2020-05-02 21:07:29
    <template> <view class="proClass flex-row" :style="proClassStyle"> <!-- 加载动画 --> ...loading :isShow="isloadingShow">...-- 左侧一分类列表 --> <scro...
  • vue实现二级联动效果

    2020-12-31 09:07:05
    你如城市与省份间的二级联动效果demo.pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}所在区域{{item.country}}{{item}}new Vue({el:'#app',data:{list:[{text: '这是第1条数据'}],...
  • js两级联动其实网上还是有很多代码可以找的。最关键的问题在于数组数据的读取。这里运用了getJSON从php获取数据,然后php读mysql数据库。js代码:var aProvince = new Array();var aProvinceID = new Array();var a...
  • 刚始学习java刚好看到用js实现省市二级联动的效果,就想着写篇博客,顺便检验下自己的学习成果。好了废话少说先看看实际效果:技术分析:要实现这个功能呢,首先要用到html+js这里用建一个下拉列表,绑定onchange...
  • RecyclerView选中后保持高亮状态,且两级联动示例 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录RecyclerView选中后保持高亮状态,且两级联动示例前言一、pandas是什么?二、使用...
  • 在网页开发过程中,选择省市的时候,省市之间有关联,这是一个小小的二级联动案例 ,运用到HTML、css、php、js以及AJAX的异步请求首先建立city.php和province.php文件和connet.html,将二级联动的大概结构写出来,...
  • 这几天做了一个小一点的两级联动的小练习,中间对于如何获取内部选择的值,走进进了岔道,所里整理了一下思路,将练习的项目代码粘贴在下面,有需要更够给您带来一点微光将是我最大的荣幸。 HTML部分的代码如下所示...
  • ajax实现二级联动、三级联动、多级联动动态下拉框一、动态效果二、html代码三、js代码四、java代码 一、动态效果 二、html代码 <form> <ul class=" page-content"> <li><label ...
  • 本文实例为大家分享了android wheel省市县三级联动效果,供大家参考,具体内容如下在github上面有一个叫做 Android-wheel 的开源控件, 代码地址:https://github.com/maarek/android-wheel主界面布局activity_main....
  • 首先是表单页面: select菜单实现二级联动 执行人* 通同select便签实现简单的二级联动jquery实现select二级联动jquery实现一个简单的select二级联动菜单,代码如下 纯js做的select二级联动分步阅读 select 联动用到的...
  • 级联动菜单-PHP源码

    2021-04-24 14:30:44
    《script》二级联动下拉菜单 自家用的 js二级联动菜单 其实我觉得 asp二级联动菜单 与 php二级联动菜单 个相同只是表示方式不一样.《script》function GetObjId(ObjName){//alert(document.all.tags('select')[i]....
  • php thinkphp 实现二级联动级联动级联动 多级联动 附件带数据库 带选中。如果不妥地方 欢迎指导,共同学习和进步。分享是种美德。页面:实验室地域城市selected='selected'>{$vo['title']}学校$region2 = ...
  • 重点是如何、通过什么条件遍历后个下拉框呢? 其实很简单的,因为我上面已经通过v-model绑定了下拉框,也就是我们在下拉框选择了一个省份的时候,data里面的province也会跟着变化, 这时候我们先给第一个下拉框...
  • layui select下拉二级联动

    千次阅读 2021-01-21 16:20:59
    }) //学校层次二级联动 form.on('select(school_id)', function(data){ //data.value 得到被选中的值 school_select(data.value); }); function school_select(value){ var url = '{:url("student/wxapp_product/...
  • layui中实现二级联动,有的时候二级联动不出来 给大家介绍种方法 <tr> <td class="tds" >企业名称:</td> <td> <select name="enter_id" lay-filter="father_enter" > <...
  • Layui实现二级联动及多级联动

    千次阅读 2019-09-10 09:13:38
    Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一、筛选框代码 <form class="layui-form" action=""> ...label c...
  • [{ "label": "北京", "value": "京" }, { "label": "天津", "value": "津" }, { "children": [{ "label": "石家庄", "value": "冀A" }, { "label": "唐山", "value": "冀B" ... "label

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,596
精华内容 10,238
关键字:

两级联动