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 相关文章推荐
js实现滑动触屏事件监听的方法
May 05 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
详解jquery选择器的原理
Aug 01 jQuery
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JS错误处理与调试操作实例分析
Apr 13 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
python链表类中获取元素实例方法
2021/02/23 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
思想汇报范文
2013/11/04 职场文书
离婚协议书怎么写
2015/01/26 职场文书
打架检讨书
2015/01/27 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python