LayUI使用distpicker.js插件实现三级联动

最新推荐文章于 2024-03-25 09:32:42 发布
最新推荐文章于 2024-03-25 09:32:42 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fbbqt/article/details/103473081
版权

本文前端是采用layui模板，三级联动采用的是distpicker.js插件

distpicker.js插件地址下载distpicker文件后，dist文件夹中的不能用（这是编译压缩后的文件），只能用src文件夹中的

1、新增页面

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>distpicker三级联动</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
</head>

<body>		
	<form class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
		<div class="layui-row layui-col-space10 layui-this layuiadmin-card-list userDetail" style="text-align: left;">		
			<div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
				<label class="layui-form-label"><span style="color: red;">* </span>地区</label>
				<div class="layui-input-inline" data-toggle="distpicker" style="display: flex;">
					<div class="form-group">
						<select class="form-control" lay-filter="province" id="province" lay-verify="required" data-province="-- 省 --"></select>
					</div>
					<div class="form-group">
						<select class="form-control" lay-filter="city" id="city" lay-verify="required" data-city="-- 市 --"></select>
					</div>
					<div class="form-group">
						<select class="form-control" lay-filter="district" id="district" lay-verify="required" data-district="-- 区 --"></select>
					</div>
				</div>
			</div>		
		</div>
		<div class="layui-form-item layui-hide" >
			<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
		</div>
	</form>

	<script src="../../../layuiadmin/layui/layui.js"></script>
	<!-- 下面的jquery.min.js和 distpicker.js插件是必须要的，并且不能用下载distpicker文件中压缩后的，只能用src中的原本的-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="../../../layuiadmin/layui/lay/modules/distpicker.js"></script>   <!-- 注意路径 -->

	<script>
		layui.config({
		    	base: '../../../layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index'//主入口模块
			});
	</script>
	
	<script>
		layui.use(['index', 'form','element','jquery'], function(){
			var form = layui.form,
				$ = layui.$;
		
		    //监听地址，用来渲染加载三级联动中的地址
			form.on('select(province)', function (data) {
				$("#province").val(data.value).change();
				form.render();
			});
			form.on('select(city)', function (data) {
				$("#city").val(data.value).change();
				form.render();
			});
			form.on('select(district)', function (data) {
				$("#district").val(data.value).change();
				form.render();
			});
		});
	</script>  	  
</body>

</html>

2、编辑页面

编辑页面的其他内容使用了layui的layptl模板，所以三级联动的js模块在加载时一定要放在layptl模板之后，否则地址三级联动的下拉框中的地址内容加载不进去

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>编辑distpicker三级联动</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<script id="layuiAdmin-form-edit" type="text/html" style="padding: 20px 0 0 0;">
	<form class="layui-form" action="">
	<div class="layui-row layui-col-space10 layui-this layuiadmin-card-list userDetail" style="text-align: left;">
		<div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
			<label class="layui-form-label"><span style="color: red; ">* </span>角色</label>
			<div class="layui-input-inline" style="width: 182px;">
				<select name="roleId">
					{{# if (layui.sessionData('roleNumber').roleNumber== '1') { }}
						<option value="2" {{#  if(d.userEdit.roleId == "2"){ }} selected {{#  } }} >管理员</option>
						<option value="3" {{#  if(d.userEdit.roleId == "3"){ }} selected {{#  } }}>代理商</option>
						<option value="4" {{#  if(d.userEdit.roleId == "4"){ }} selected {{#  } }}>医生</option>
					{{# } else if (layui.sessionData('roleNumber').roleNumber== '2') { }}
						<option value="3" {{#  if(d.userEdit.roleId == "3"){ }} selected {{#  } }}>代理商</option>
						<option value="4" {{#  if(d.userEdit.roleId == "4"){ }} selected {{#  } }}>医生</option>
					{{# } else { }}
						<option value="4" {{#  if(d.userEdit.roleId == "4"){ }} selected {{#  } }}>医生</option>
					{{# } }}
				</select>
			</div>
		</div>
				
		<div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
			<label class="layui-form-label"><span style="color: red; ">* </span>地区</label>
			<div class="layui-input-inline" data-toggle="distpicker" id="distpicker" style="display: flex;">
				<div class="form-group">
					<select class="form-control" lay-filter="province" id="province" lay-verify="required"></select>
				</div>
				<div class="form-group">
					<select class="form-control" lay-filter="city" id="city" lay-verify="required"></select>
				</div>
				<div class="form-group">
					<select class="form-control" lay-filter="district" id="district" lay-verify="required"></select>
				</div>
			</div>
		</div>
		
	</div>
		<div class="layui-form-item lay-hide" >
			<div class="layui-input-block" style="display: none;">
				<button type="button" ></button>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="LAY-user-edit-submit">确定</button>
				<button type="button" class="layui-btn layui-btn-primary" lay-href="user/user/list.html">取消</button>
			</div>
		</div>
	</form>
</script>

<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-sm12">
			<div class="layui-card">
				<div class="layui-card-header">
					编辑
				</div>
				<div class="layui-card-body" id="view"></div>
			</div>
		</div>
	</div>
</div>

<div id="view"></div>

<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../../../layuiadmin/layui/lay/modules/distpicker.js"></script>

<script>
	layui.config({
		base: '../../../layuiadmin/' //静态资源所在路径
		}).extend({
		index: 'lib/index' //主入口模块
		})
</script>
	
<script>
layui.use(['index', 'laydate', 'layer', 'form', 'element', 'admin', 'laytpl'], function(){
	var laydate = layui.laydate,
		layer = layui.layer,
		form = layui.form,
		$ = layui.$,
		laytpl = layui.laytpl,
		admin = layui.admin;

	//获取url search值
	function getSearch(name) {
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	}

	var userId = getSearch("userId");
	
	admin.req({
		url:layui.setter.url + 'user/getUserInfo'
		,type: 'post'
		,data: {
			LOGINTOKEN:layui.data('tokenName').LOGINTOKEN,
			userId:userId,PageNum:1,PageSize:1
		}
		,done: function(res){
			

			var data = {
				"userEdit":res.data
			};

			//加载模板
			var getTpl=document.getElementById('layuiAdmin-form-edit').innerHTML
				,view = document.getElementById('view');
				laytpl(getTpl).render(data, function(html){
					view.innerHTML = html;
				});

	
			//地址三级联动
			$("#distpicker").distpicker('destroy');
			$("#distpicker").distpicker({
				autoSelect: false,
				placeholder: false
			});
			//从后台获取数据后并进行分割，然后填充到前端页面
			let myArea = res.data.area.split('-');
			$("#province").val(myArea[0]);
			$("#province").trigger("change");
			$("#city").val(myArea[1]);
			$("#city").trigger("change");
			$("#district").val(myArea[2]);
			$("#district").trigger("change");

			//插件显示
			form.render();
		}
	});

	//监听地址
	form.on('select(province)', function (data) {
		$("#province").val(data.value).change();
		form.render();
	});
	form.on('select(city)', function (data) {
		$("#city").val(data.value).change();
		form.render();
	});
	form.on('select(district)', function (data) {
		$("#district").val(data.value).change();
		form.render();
	});

	// 监听提交
	form.on('submit(LAY-user-edit-submit)', function(data){

		//获取三级联动地址提交的字段并进行拼接
		var myProvince = $("#province option:selected").val();
		var myCity = $("#city option:selected").val();
		var myDistrict = $("#district option:selected").val();
		data.field.area = myProvince + '-' + myCity + '-' +  myDistrict;
		data.field.LOGINTOKEN = layui.data('tokenName').LOGINTOKEN;
		data.field.userId = userId;

		let userString = JSON.stringify(data.field);
		data.field.userString = userString;


		return false;
	});
});
</script>

</body>
</html>
fbbqt
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
distpicker.js
10-15
distpicker省市区三级联动插件所需要的JS,大家自取即可
前端JQuery插件distpicker.js的部分操作使用
互联网编程爱好者
03-26 2053
前端JQuery插件distpicker.js的部分操作使用 前言： 需要导入的插件JQuery以及distpicker.js。distpicker GitHub官网，可在官网查询，也可在bootcdn中下载。 简单引入 <!-- data-toggle="distpicker"必选,data-value-type="code"可选，表示选中值为省市区代码， data-province 可选，默认省级显示 data-city 可选，默认市级显示 data-district 可选，默
distpicker.js 三级联动，修改地址时设置默认值
weixin_38247148的博客
03-08 3016
做java 后台的，半路出家 ，想做个自己的商城，卖点东西想着挣点外快，用到了js的三级联动，在网上找了很多，没找到解决的方法。只能想办法自己解决，想着留个备份，所以处女做作给js 啦~~主要考虑遍历、触发事件和设置option的selected 属性。言归正传以下是代码 html &lt;div data-toggle="distpicker" class="add...
探索Distpicker：一款高效易用的JavaScript省市区选择器
最新发布
gitblog_00066的博客
03-25 612
探索Distpicker：一款高效易用的JavaScript省市区选择器 distpicker⚠️ [Deprecated] No longer maintained. A simple jQuery plugin for picking provinces, cities and districts of China. (中国 / 省市区 / 三级联动 / 地址选择器)项目地址:https:/...
distpicker.js制作省市区三级联动
hangGe0111的博客
04-20 832
1.html <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .txzlLi { margin...
省市想县三级联动下拉选/distpicker.js/jquery省市县三级联动插件
11-26
总的来说，"省市县三级联动下拉选/distpicker.js/jquery省市县三级联动插件"为网页开发人员提供了一个高效、易用的解决方案，能够帮助他们快速实现中国地区的三级联动下拉查询功能，提升网站的交互性和用户体验。...
distpicker-js省市区三级联动插件
01-16
今天我们将深入探讨一款名为"distpicker-js"的JavaScript插件，它专门用于实现这种三级联动效果。 distpicker-js是一款轻量级、高效且易于使用的插件，它包含了四个主要的JavaScript文件：distpicker.js、...
layui自定义插件citySelect实现省市区三级联动选择
10-16
这篇文章将详细介绍如何利用layui自定义插件来实现省市区三级联动选择。 ### Layui介绍 Layui是由国内开发者“贤心”开发的一个前端UI框架。它以轻量级、模块化、易扩展和使用简单著称，支持多种类的Web界面开发。...
layui实现下拉框三级联动
10-16
在本文中，我们将深入探讨如何使用layui框架实现下拉框的三级联动效果。layui是一款流行的前端组件库，它提供了丰富的UI元素和交互功能，适用于快速构建美观且响应式的Web应用。下拉框三级联动通常用于地理信息选择...
C# MVC 使用LayUI实现下拉框二级联动的功能
08-19
C# MVC 使用LayUI实现下拉框二级联动的功能 C# MVC 中使用 LayUI 实现下拉框二级联动的功能是指在 Web 应用程序中使用 LayUI 库来实现下拉框的二级联动功能，即根据选择的部门来动态加载对应的角色信息。下拉框二级...
基于distpickers.js省市县联动插件带搜索
06-01
三级省市县联动插件，带搜索
distpicker.data.js
10-15
distpicker插件需要的东西,自取.
v-distpicker.js
06-13
dist，v-distpicker.js 不用npm。只需一个js。搞定。
jQuery库+distpicker库实现省市区三级联动效果（超简单版）
mqh16696033405的博客
12-24 1338
创建一个省-市-区 (省市区) 三级联动下拉列表，用于选择中国的地理位置。这种功能通常用在用户需要选择其位置的表单中，本文将使用 jQuery 和distpicker库实现省-市-区 (省市区) 三级联动下拉列表distpicker
html5树形省市区,IE8+省市区三级联动插件 - distpicker.js
weixin_35460589的博客
06-04 246
BasicHTML:Demo:ProvinceCityDistrictCustom placeholdersHTML:Demo:ProvinceCityDistrictCustom districtsHTML:Demo:ProvinceCityDistrictThe districts must be existed in the distpicker.data.js file!Initializ...
【Jquery】省市区三级联动插件 ：Distpicker以及使用自定义数据库数据
然后微微笑的博客
04-16 2677
Distpicker主要用来进行表单的省市区三级联动。 1.参考地址 Git：https://github.com/fengyuanchen/distpicker 演示：http://www.jq22.com/yanshi8054 2.效果示例 3.引用代码 <script src="/path/to/jquery.js"></script><!-- jQuery...
layui搭配Distpicker实现省市县多级联动
cristianoxm的博客
12-01 517
一、下载Distpicker，将dist下的目录拷贝到静态资源下 前端代码： <div class="layui-input-inline"> <select name="province" lay-filter="province" id="province" data-province="- 省/自治区/直辖市 -" ></select> </div> <div class="layui-input-inline"> <select
layui省市区三级联动及三级下拉框回显
a_11111112的博客
08-25 1782
layui省市区三级联动及三级下拉框回显
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值