layui联动地址

千次阅读

2020-08-05 17:09:30

基于layui封装了一个地址选择器，地址数据采用weui的city-picker。因为项目很多都封装在common里面，
所以该common只抽出showCity和getCity方法。

一、用法

1. html写法

name和lay-filter必须保持统一,data-area是地址默认值

<select name="province" data-area="广东省" lay-filter="province"><option value="">选择省</option></select>
  <select name="city" data-area="广州市" lay-filter="city"><option value="">选择市</option></select>
  <select name="district" data-area="天河区" lay-filter="district"><option value="">选择区</option></select> 

<h3>2. 需引入city-picker.js地址数据文件</h3>
<script type="text/javascript" src="js/city-picker.js"></script>

如果未引入，则会提示未引用地址数据

3. layui引入common模块

//config的设置是全局的

layui.config({
  base: 'js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  common: 'common' //如果 common.js 是在根目录，也可以不用设定别名
});

4. 使用模块

layui.use(['form', 'common'], function(){
  var common = layui.common,
    form = layui.form;

    //三级地址联动
    common.showCity('province', 'city', 'district');

    //监听提交
    form.on('submit(formDemo)', function(data){
      var resData = data.field,
        province = resData.province,
        city = resData.city,
        district = resData.district;

      console.log(province, city, district) // 440000 440100 440106

      // 通过地址code码获取地址名称
      var address = common.getCity({
        province,
        city,
        district
      });

      console.log(address); // {provinceName: "广东省", cityName: "广州市", districtName: "天河区"}
      return false;
    });
});

二、相关API

common有两个方法， showCity用来加载地址选择器， getCity用来由地址code码获取地址名称。

方法名	说明	type
showCity	[param1]省 [param2]市 [param3]县	string
getCity	[option]{param1 code param2 code param3 code}	object

三、演示

layui三级联动地址（省市区）下拉框实现演示：https://www.zhe94.com/code/layui-select-address-master/

javascript

更多相关内容

layui实现下拉框三级联动
2020-10-16 15:23:22

主要为大家详细介绍了layui实现下拉框三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
jquery基于layui实现二级联动下拉选择(省份城市选择)
2020-10-19 16:17:25

本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择)，具有一定的实用价值，需要的朋友可以参考下

收起
layui省市区三级联动城市选择
2019-09-09 13:46:10

使用jQuery基于layui框架制作精美的省市区下拉框三级联动菜单选择，支持三级联动城市选择，点击提交获取选中值代码。

收起
layui地址联动demo+sql
2019-10-15 11:29:49

layui地址联动demo+sql+layui地址联动demo+sql+layui地址联动demo+sql+layui地址联动demo+sql

收起

sql语句
layui地址联动sql
2019-10-14 17:19:58

实现全国城市联动选择 layui+Thinkphp,layui的地址选择,地址sql语句

收起

sql
基于LayUI省市区三级联动
2021-06-26 09:14:21

基于LayUI省市区三级联动，可以联动选择相应的内容

收起

layui联动选择框

千次阅读 2019-12-23 15:57:55

form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class...

表单

代码

<form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post">		
		<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">入库单号:</label>
					<div class="layui-input-inline">
						<input type="text" name="enterStockId" autocomplete="off" class="layui-input" value="${enterStockId}" readonly="readonly">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">供应商:</label>
					<div class="layui-input-inline">						
						<select name="supplier" lay-verify="required">
							<option value="">请选择</option>
							<option value="京东商城" selected="">京东商城</option>			        		       		        
					    </select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">入库日期:</label>
					<div class="layui-input-inline">
						<input type="text" name="enterDate" id="enterDate" class="layui-input" lay-verify="date" placeholder="yyyy-MM-dd">
					</div>
				</div>
				<div class="layui-inline">
						<label class="layui-form-label">经办人:</label>
						<div class="layui-input-inline">
							<input type="text" name="operator" class="layui-input" value="${user.realName}" readonly="readonly">
						</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">设备类型:</label>
					<div class="layui-input-inline">
						<select name="parentName" lay-filter="parentName" lay-verify="required">
							<option value="">请选择</option>
							<c:forEach items="${types}" var="t">
								<option value="${t.parentName }">${t.parentName}</option>
							</c:forEach>			        		       		        
					    </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">明细分类:</label>
					<div class="layui-input-inline">
						<select name="childrenName" id="childrenName" lay-filter="childrenName" lay-verify="required">									        		       		        
					    </select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">设备名称:</label>
					<div class="layui-input-inline">
						<select name="goodsName" id="goodsName" lay-filter="goodsName" lay-verify="required">										        		       		        
					    </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">规格型号:</label>
					<div class="layui-input-inline">
						<select name="specs" id="specs" lay-verify="required">										        		       		        
					    </select>						
					</div>
				</div>
			</div>				
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">入库数量:</label>
					<div class="layui-input-inline">
						<input type="text" name="number" lay-verify="number" autocomplete="off" class="layui-input"  placeholder="数量">
					</div>					
				</div>				
			</div>						
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="adminInfo">保存</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>		
	</form>

联动代码

<script type="text/javascript">			  	
	layui.use(['form', 'layedit', 'laydate'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  		  
		  laydate.render({
		    elem: '#enterDate'
		  });		  	  
		});
		var info='${info}';		
		if(info=='ok'){
			layui.use('layer', function(){
				  var layer = layui.layer;							  
				  layer.alert('入库成功')
				});
		
		}
		if(info=='fail'){
			layui.use('layer', function(){
				  var layer = layui.layer;							  
				  layer.alert("添加失败");
				});
		
		}
	</script>
	<script type="text/javascript">
	layui.use('form', function () {
        var form = layui.form; 
         form.on('select(parentName)', function(data){
        	   $.getJSON("getChildrenName?parentName="+data.value, function(data){
        	    var optionstring = "";
        	    $.each(data.data, function(i,item){
        	     optionstring += "<option value=\"" + item.childrenName + "\" >" + item.childrenName + "</option>";
        	    });
        	    $("#childrenName").html('<option value=""></option>' + optionstring);
        	    form.render('select'); //这个很重要
        	   });        	   
        	});
	        form.on('select(childrenName)', function(data){
	     	   $.getJSON("getByChildrenName?childrenName="+data.value, function(data){
	     	    var optionstring = "";
	     	    $.each(data.data, function(i,item){
	     	     optionstring += "<option value=\"" + item.goodsName + "\" >" + item.goodsName + "</option>";
	     	    });
	     	    $("#goodsName").html('<option value=""></option>' + optionstring);	     	   
	     	    form.render('select'); //这个很重要
	     	   });        	   
	     	});
	        form.on('select(goodsName)', function(data){
		     	   $.getJSON("getSpecs?goodsName="+data.value, function(data){
		     	    var optionstring = "";
		     	    $.each(data.data, function(i,item){
		     	     optionstring += "<option value=\"" + item.specs + "\" >" + item.specs + "</option>";
		     	    });
		     	    $("#specs").html('<option value=""></option>' + optionstring);	     	   
		     	    form.render('select'); //这个很重要
		     	   });        	   
		     	});
    });
	</script>

后端代码

/itmanage/src/main/java/com/chief/itmanage/controller/EnterStockController.java

//入库登记
	@RequestMapping("addStock")
	public String addStock(Model model) {
		Date date=new Date();		
		DateFormat formatter= new SimpleDateFormat("yyyyMMddHHmmss");	
		String enterStockId= "rk"+formatter.format(date);	
		model.addAttribute("enterStockId", enterStockId);	
		List<Type> types=typeService.getParentName();		
		model.addAttribute("types", types);
		return "addStock";
	}

// 二级分类选择框
	@RequestMapping("getByChildrenName")
	@ResponseBody
	public String getByChildrenName(String childrenName) {
		List<Goods> list = goodsService.getByChildrenName(childrenName);
		String s = JSON.toJSONString(list);
		logger.info(s);
		JSONObject obj = new JSONObject();
		// 前台通过key值获得对应的value值
		obj.put("code", 0);
		obj.put("msg", "");
		obj.put("data", list);
		return obj.toJSONString();
	}

//联动选择框
	@RequestMapping("getChildrenName")
	@ResponseBody
	public String getChildrenName(String parentName) {
		List<Type> list=typeService.getChildrenName(parentName);
		String s = JSON.toJSONString(list);
		logger.info(s);
		JSONObject obj = new JSONObject();
		// 前台通过key值获得对应的value值
		obj.put("code", 0);
		obj.put("msg", "");
		obj.put("data", list);
		return obj.toJSONString();
	}

// 型号选择框
	@RequestMapping("getSpecs")
	@ResponseBody
	public String getSpecs(String goodsName) {
		List<Goods> list = goodsService.getByGoodsName(goodsName);
		String s = JSON.toJSONString(list);
		logger.info(s);
		JSONObject obj = new JSONObject();
		// 前台通过key值获得对应的value值
		obj.put("code", 0);
		obj.put("msg", "");
		obj.put("data", list);
		return obj.toJSONString();
	}

最终效果

收起

展开全文

layui下拉框联动查询效果

千次阅读 2020-04-13 23:42:32

之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉框，其实都是异曲同工之妙。解决方案 *. ...

前言

之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉框，其实都是异曲同工之妙。
在这里插入图片描述

解决方案

*. 由于系统代码为保密，所以这里只摘录部分代码并对原有的变量等做了处理。

HTML部分，两个select框。

<label class="layui-form-label">一级部门</label>
<select id="departmentFirstLevel" name="departmentFirstLevel">
   <option value=""></option>
</select>

<label class="layui-form-label">二级部门</label>
<select id="departmentSecondaryLevel" name="departmentSecondaryLevel">
   <option value=""></option>
</select>

初始化一级部门

function initDepartmentFirstLevel(){
   $.ajax({
       type: 'POST',
       url: "${request.contextPath}/departmentFirstLevel/list",
       data:{"searchParams":"","page":"1","limit":"99"},
       success: function (responseData) {
           if (responseData.code === 200 || responseData.code === 0) {
               var length = responseData.data.length;
               console.log("一级部门数量:"+length);
               $("#departmentFirstLevel").empty();
               $("#departmentFirstLevel").append('<option value=""></option>');
               for(var i = 0; i < length; i++) {
                   //添加option元素
                   $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
               }
               //如果你是用freemaker，可以用该方法选中变量
               $("#departmentFirstLevel").val("${(user.departmentFirstLevel)!!}");
               //渲染select
               form.render('select');
           } else {
               layer.msg("加载列表失败");
           }
       }
   });
}
//直接初始化一级部门
initDepartmentFirstLevel();

设置一级部门联动二级部门效果。

form.on('select(departmentFirstLevel)', function(data){
    //根据一级部门联动二级部门
    initDepartmentSecondaryLevel();
});

二级部门联动逻辑，核心就是传入选择的i一级部门id，传给Controller方法查询并列出对应的二级部门，产生联动效果。

function initDepartmentSecondaryLevel(){
    $.ajax({
        type: 'POST',
        url: "${request.contextPath}/departmentSecondaryLevel/list",
        data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page":"1","limit":"99"},
        success: function (responseData) {
            if (responseData.code === 200 || responseData.code === 0) {
                var length = responseData.data.length;
                console.log("二级部门数量:"+length);
                $("#departmentSecondaryLevel").empty();
                $("#departmentSecondaryLevel").append('<option value=""></option>');
                for(var i = 0; i < length; i++) {
                    //添加option元素
                    $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                }
                //如果你是freemarker，可以用该方法设置选中效果
                $("#departmentSecondaryLevel").val("${(user.departmentSecondaryLevel)!!}");
                //渲染select
                form.render('select');
            } else {
                layer.msg("加载列表失败");
            }
        }
    });
}
//如果二级部门数量较少，可以考虑直接初始化（当然， 建议不要）。
//initDepartmentSecondaryLevel()

收起

展开全文

layui下拉框二级数据联动 fzzx.zip
2020-04-29 16:51:34

layui下拉框select动态获取后台数据，下拉框二级联动效果，压缩包里打开a.html即可查看。

收起

layui联动菜单搜索select表单选项的设置方法

2021-07-02 10:17:56

联动菜单用于需要使用ajax来调用后端数据，如下图：一级菜单 <div class="layui-input-inline"> <select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" ...

联动菜单用于需要使用ajax来调用后端数据，如下图：
在这里插入图片描述

一级菜单

<div class="layui-input-inline">
	<select name="member_depart" lay-verify="required" id="member_depart"
	lay-filter="member_depart" style="height:10px;" lay-search="">
		<option value="">选择单位</option>
		<option value="8,浙江大学">浙江大学</option>
		<option value="7,宁波大学">宁波大学</option>
		<option value="4,复旦大学">复旦大学</option>
		<option value="2,深圳大学">深圳大学</option>
		<option value="1,北师大附中">北师大附中</option>
	</select>
</div>

其中深圳大学中的value都是id,name组成的字符串，需要在前端JS或者后端语言中对字符串进行预处理，然后才能和数据库进行有效的交互。

监听下拉框数据分离

	//监听下拉框
			form.on('select(member_depart)', function (data) {
				var txt = $("#member_depart option:selected").text();//获取select选中的值
				$('.member_depart').html(txt);

				//获取关联部门;
				//console.log($("#member_depart").val());
				if ($("#member_depart").val()){
					var member_id = $("#member_depart").val().split(",")[0];
					getBranch(member_id);
				}
			});

比如需要调用传递过来的调用函数getBranch(member_id)，来实现小类数据的调用，就需要member_id = $("#member_depart").val().split(",")[0];进行数据的split分离。
当然，这是前段不可缺少的步骤。

数据查询产生的问题

但是在进行数据查询搜索过程中，如果直接使用该方式，值不为空的情况下，都是成立的。如果为空，则split会进行控制台报错，无法分离","。

解决方案是默认选项中，直接设置为<option value=",">选择单位</option>，即可解决

编辑状态如何实现选择

如果要编辑数据，但是前端是ajax调用的，使用后端和前端语言就需要原生的混写开发了。

		//默认加载,获取同部门同设备下的IP池;
		$.get('./api/api.php?act=getIPLists&token=3cab7ce4142608c0f40c785b5ab5ca24', {
			branch_id: branch_id,
			major_id: major_id
		}, function (res) {
			var memberHtml = '';
			memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>';
			for (var i = 0; i < res.data.length; i++) {
				memberHtml += '<option value="' + res.data[i].pool_address + '" >' + res.data[i].pool_address + '</option>'
			}
			$('#pool_address').html(memberHtml);
			form.render();

			//监听下拉框
			form.on('select(pool_address)', function (data) {
				var txt = $("#pool_address option:selected").text();//获取select选中的值
				$('.pool_address').html(txt);
				//获取对应IP池信息;
				transAddress();
			});
		}, 'json');

即memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>';在ajax的选项中，从后台读取数据库中现存的数据字段直接予以显示，然后再select进行交互。

lockdatav Done!

收起

展开全文

layui select下拉框联动
2021-04-09 11:37:17

背景：涉及到省市县获取的项目必有下拉框三级联动，每次都需要百度查询，或者去翻原来的项目，着实不方便。因此，为了自己对三级联动的印象加深，同时也帮助第一次接触下拉框三级联动的小伙伴快速上道，总结一下该...

收起
LayUI select下拉框联动
千次阅读 2021-07-13 12:32:54

LayUI 下拉框联动，选择一个其他根据对应关系自动选择。 HTML代码如下： <div class='layui-fluid'> <div class='layui-card'> <form class="layui-form layui-card-header layuiadmin-card-...

收起
封装简易实用layui三级联动(一行代码实现).rar
2019-09-20 17:42:01

简易的 layui 三级联动使用只需要一行代码封装到了layui模块 layui专用

收起
解决layui 三级联动下拉框更新时回显的问题
2020-12-10 12:04:45

最近接触layui，比较简洁美观的一款ui，但也有很多小坑，记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...

收起
这里是基于layui开发的省市区三级联动下拉框.zip
2019-07-17 15:44:37

这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框

收起
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2020-10-16 11:01:28

今天小编就为大家分享一篇使用layui日期控件laydate对开始和结束时间进行联动控制的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

收起
layui 表单form 联动选择
2022-01-26 14:58:26

layui 表单form 联动选择 <form class="layui-form kuuuuuuu" action=""> <div class="layui-form-item"> <label class="layui-form-label">联动选择框</label> <div class="layui-...

收起

javascript
layui的select联动实现代码
2020-10-16 07:24:21

今天小编就为大家分享一篇layui的select联动实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

收起
layui实现三级联动效果
2020-10-16 15:22:17

主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
layui 三级联动，简单实现
2021-11-02 20:16:04

本文采用 TP5.0 框架 ... <div class="layui-form-item...地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" id="province" lay-filter="province"...

收起

javascript php
使用layui+Jquery实现全国地址三级联动
2022-05-27 09:58:23

使用layui+Jquery实现全国地址三级联动，实现：选择省级下拉框的值后，将该省下的州市放入到市级下拉框中，选择市级下拉框的值后，将该市下的区县放入到区级下拉框中，并利用onchange事件实时监控下拉框值的变化，将...

收起
基于 layui 制作地址三级联动
千次阅读 2019-06-12 16:47:31

基于layui的select制作地址三级联动，地址数据采用jqweui的city-picker demo:https://mzongx.github.io/layui-select-address/ githud:https://github.com/mzongx/layui-select-address 需要的可以看下，写得不好...

收起
全国城市地址联动选择layui
千次阅读 2019-10-14 17:21:00

全国城市地址联动选择layui HTML–代码 <form class="layui-form"> <div class="layui-form-item layui-form-pane"> <label class="layui-form-label">城市联动</label> <div cla...

收起
layui下拉框联动
万次阅读 2017-11-09 12:28:51

定义下拉框：<div class="layui-input-inline layui-form" lay-filter="prov"> 全部数据来源</option>

收起
layui怎么实现三级联动
2021-04-18 14:15:48

layui实现三级联动的方法：...最后通过layui模块实现三级联动即可。本教程操作环境：windows10系统、layui2.5.6版，该方法适用于所有品牌电脑。基于layui的三级联动模块1.html的页面代码如下：请选择省请选择市请选...

收起
layui省市区三级联动城市选择.rar
2020-03-20 15:11:21

本资源含有html页面，解压后可直接打开点击运行查看效果，代码可直接使用，方便快捷。该三级联动使用layui前端框架编写，可复用性很高。

收起

一、用法

1. html写法

3. layui引入common模块

4. 使用模块

二、相关API

三、演示

layui实现下拉框三级联动

jquery基于layui实现二级联动下拉选择(省份城市选择)

layui省市区三级联动城市选择

layui地址联动demo+sql

layui地址联动sql

基于LayUI省市区三级联动

layui联动选择框

layui下拉框联动查询效果

前言

解决方案

layui下拉框二级数据联动 fzzx.zip

layui联动菜单搜索select表单选项的设置方法

一级菜单

监听下拉框数据分离

数据查询产生的问题

编辑状态如何实现选择

layui select下拉框联动

LayUI select下拉框联动

封装简易实用layui三级联动(一行代码实现).rar

解决layui 三级联动下拉框更新时回显的问题

这里是基于layui开发的省市区三级联动下拉框.zip

使用layui日期控件laydate对开始和结束时间进行联动控制的方法

layui 表单form 联动选择

layui的select联动实现代码

layui实现三级联动效果

layui 三级联动，简单实现

使用layui+Jquery实现全国地址三级联动

基于 layui 制作地址三级联动

全国城市地址联动选择layui

layui下拉框联动

layui怎么实现三级联动

layui省市区三级联动城市选择.rar

layui联动地址