精华内容
下载资源
问答
  • 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/

     

    更多相关内容
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下
  • 使用jQuery基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码。
  • layui地址联动demo+sql

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

    2019-10-14 17:19:58
    实现全国城市联动选择 layui+Thinkphp,layui地址选择,地址sql语句
  • 基于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
    之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。 解决方案 *. ...

    前言

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

    解决方案

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

    1. 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>
    
    1. 初始化一级部门
    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();
    
    1. 设置一级部门联动二级部门效果。
    form.on('select(departmentFirstLevel)', function(data){
        //根据一级部门联动二级部门
        initDepartmentSecondaryLevel();
    });
    
    1. 二级部门联动逻辑,核心就是传入选择的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下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。
  • 联动菜单用于需要使用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 三级联动 使用只需要一行代码 封装到了layui模块 layui专用
  • 最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...
  • 这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框
  • 今天小编就为大家分享一篇使用layui日期控件laydate对开始和结束时间进行联动控制的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 表单form 联动选择 <form class="layui-form kuuuuuuu" action=""> <div class="layui-form-item"> <label class="layui-form-label">联动选择框</label> <div class="layui-...
  • 今天小编就为大家分享一篇layui的select联动实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了layui实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文采用 TP5.0 框架 ... <div class="layui-form-item...地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" id="province" lay-filter="province"...
  • 使用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实现三级联动的方法:...最后通过layui模块实现三级联动即可。本教程操作环境:windows10系统、layui2.5.6版,该方法适用于所有品牌电脑。基于layui的三级联动模块1.html的页面代码如下:请选择省请选择市请选...
  • 本资源含有html页面,解压后可直接打开点击运行查看效果,代码可直接使用,方便快捷。该三级联动使用layui前端框架编写,可复用性很高。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,407
精华内容 562
关键字:

layui联动地址