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程序来实现动画功能
Mar 06 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 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删除HTMl标签的实现代码
2013/06/30 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
jQuery的一些注意
2006/12/06 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
Vue表单输入绑定的示例代码
2018/11/01 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
NumPy中的维度Axis详解
2019/11/26 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
行政专员的岗位职责
2014/03/10 职场文书
西式婚礼主持词
2014/03/13 职场文书
2014年维稳工作总结
2014/11/18 职场文书
先进个人事迹材料
2014/12/29 职场文书
党支部承诺书
2015/01/20 职场文书
体育教师个人工作总结
2015/02/09 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
python神经网络编程之手写数字识别
2021/05/08 Python
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
关于python类SortedList详解
2021/09/04 Python