layui使用及简单的三级联动实现教程


Posted in Javascript onDecember 01, 2020

LayUI的使用

1 、引用

1、下载:官网:https://www.layui.com

2、使用方法:直接将解压好的压缩包拖拽到项目内

 将以下导入到html中: 

<link rel="stylesheet" href="/自己的地址/./layui/css/layui.css" rel="external nofollow" media="all">
 <script type="text/javascript" src="../自己的地址+/layui/layui.js"></script>

2、输出: hello world

<script type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></script> 
 <!-- 直接将解压的文件辅助到项目 然后导入layui.css和layui.js -->
 <script type="text/javascript" src="../day/layui/css/layui.css"></script>
 <script type="text/javascript" src="../day/layui/layui.js"></script>
 <!--提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js -->
 <script type="text/javascript" src="./layui/layui.all.js"></script>
</head>
<body>

 <script>
  // layui.use(['layer', 'form'], function(){
  // var layer = layui.layer
  // ,form = layui.form;
  // layer.msg('Hello World');
  // });
  
  $(function(){
   layer.msg('Hello World');
  })
 </script> 

</body>
</html>

3、基于layui三级联动

layui使用及简单的三级联动实现教程

html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>基于 Layui form 组件的省市区联动选择的实现</title>
 
 <script type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></script> 
 <link rel="stylesheet" href="layui/css/layui.css" /> 
 <script src="layui/css/layui.css"></script>
 <script type="text/javascript" src="layui/layui.js"></script> 
 <script type="text/javascript" src="./data.js"></script>
 <script type="text/javascript" src="/province.js"></script>
 <script type="text/javascript">
  var defaults = {
   s1: 'provid',
   s2: 'cityid',
   s3: 'areaid',
   v1: null,
   v2: null,
   v3: null
  };
 
 </script>
</head>
<body>
 <div style="width:800px;margin:50px auto;">
  <form class="layui-form">
   <div class="layui-form-item">
    <label class="layui-form-label">选择地区</label>
    <div class="layui-input-inline">
     <select name="provid" id="provid" lay-filter="provid">
      <option value="">请选择省</option>
     </select>
    </div>
    <div class="layui-input-inline">
     <select name="cityid" id="cityid" lay-filter="cityid">
      <option value="">请选择市</option>
     </select>
    </div>
    <div class="layui-input-inline">
     <select name="areaid" id="areaid" lay-filter="areaid">
      <option value="">请选择县/区</option>
     </select>
    </div>
   </div>
  </form>
 </div>
</body>
</html>
province.js
var defaults = {
 s1: 'provid',
 s2: 'cityid',
 s3: 'areaid',
 v1: null,
 v2: null,
 v3: null
};
var $form;
var form;
var $;
layui.define(['jquery', 'form'], function () {
 $ = layui.jquery;
 form = layui.form;
 $form = $('form');
 treeSelect(defaults);
});
function treeSelect(config) {
 config.v1 = config.v1 ? config.v1 : 110000;
 config.v2 = config.v2 ? config.v2 : 110100;
 config.v3 = config.v3 ? config.v3 : 110101;
 $.each(threeSelectData, function (k, v) {
  appendOptionTo($form.find('select[name=' + config.s1 + ']'), k, v.val, config.v1);
 });
 form.render();
 cityEvent(config);
 areaEvent(config);
 form.on('select(' + config.s1 + ')', function (data) {
  cityEvent(data);
  form.on('select(' + config.s2 + ')', function (data) {
   areaEvent(data);
  });
 });

 function cityEvent(data) {
  $form.find('select[name=' + config.s2 + ']').html("");
  config.v1 = data.value ? data.value : config.v1;
  $.each(threeSelectData, function (k, v) {
   if (v.val == config.v1) {
    if (v.items) {
     $.each(v.items, function (kt, vt) {
      appendOptionTo($form.find('select[name=' + config.s2 + ']'), kt, vt.val, config.v2);
     });
    }
   }
  });
  form.render();
  config.v2 = $('select[name=' + config.s2 + ']').val();
  areaEvent(config);
 }
 function areaEvent(data) {
  $form.find('select[name=' + config.s3 + ']').html("");
  config.v2 = data.value ? data.value : config.v2;
  $.each(threeSelectData, function (k, v) {
   if (v.val == config.v1) {
    if (v.items) {
     $.each(v.items, function (kt, vt) {
      if (vt.val == config.v2) {
       $.each(vt.items, function (ka, va) {
        appendOptionTo($form.find('select[name=' + config.s3 + ']'), ka, va, config.v3);
       });
      }
     });
    }
   }
  });
  form.render();
  form.on('select(' + config.s3 + ')', function (data) { });
 }
 function appendOptionTo($o, k, v, d) {
  var $opt = $("<option>").text(k).val(v);
  if (v == d) { $opt.attr("selected", "selected") }
  $opt.appendTo($o);
 }
}
=======================================================================================
data数据
var threeSelectData={"北京":{val:"110000",items:{"北京":{val:"110100",items:{"东城区":"110101","西城区":"110102","崇文区":"110103","宣武区":"110104","朝阳区":"110105","丰台区":"110106","石景山区":"110107","海淀区":"110108","门头沟区":"110109","房山区":"110111","通州区":"110112","顺义区":"110113","昌平区":"110114","大兴区":"110115","怀柔区":"110116","平谷区":"110117","密云县":"110228","延庆县":"110229"}}}}

总结     

到此这篇关于layui使用及简单的三级联动实现的文章就介绍到这了,更多相关layui使用及三级联动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery JSON的解析方式
Jul 25 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
理解javascript回调函数
Dec 28 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
node.js文件上传处理示例
Oct 27 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
编写v-for循环的技巧汇总
Dec 01 #Javascript
jquery实现拖拽添加元素功能
Dec 01 #jQuery
创建与框架无关的JavaScript插件
Dec 01 #Javascript
jQuery实现可以扩展的日历
Dec 01 #jQuery
如何使用gpu.js改善JavaScript的性能
Dec 01 #Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
You might like
文章推荐系统(三)
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
mongodb和php的用法详解
2019/03/25 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JavaScript闭包详解
2015/02/02 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
浅析PEP572: 海象运算符
2019/10/15 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
以下的初始化有什么区别
2013/12/16 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
读书演讲主持词
2014/03/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
贷款工资证明范本
2015/06/12 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Python学习开发之图形用户界面详解
2021/08/23 Python