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 jQuery插件练习
Dec 24 Javascript
JavaScript 创建对象
Jul 17 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
js实现打字小游戏
Dec 17 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
PHP 和 COM
2006/10/09 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
完美的php分页类
2017/10/24 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python实现静态web服务器
2019/09/03 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python ellipsis 的用法详解
2020/11/20 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
禁毒宣传工作方案
2014/05/23 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS