<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<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=no"/>
<title>layui-select-address</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/x-icon" href="#" />
<link rel="stylesheet" href="static/css/layui.css" />
<script src="static/js/jquery-1.9.1.min.js"></script>
<script src="static/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space20">
<div class="layui-col-md3"></div>
<div class="layui-col-md6">
<blockquote class="layui-elem-quote" style="margin-top: 100px;">地址选择插件</blockquote>
<!-- 地址选择插件 start -->
<form class="layui-form">
<div class="layui-row">
<div class="layui-col-sm4">
<div class="layui-inline layui-select-default" style="width: 99%;">
<select name="province" data-area="广东省" lay-filter="province">
<option value="">选择省</option>
</select>
</div>
</div>
<div class="layui-col-sm4">
<div class="layui-inline layui-select-default" style="width: 99%;">
<select name="city" data-area="广州市" lay-filter="city">
<option value="">选择市</option>
</select>
</div>
</div>
<div class="layui-col-sm4">
<div class="layui-inline layui-select-default" style="width: 99%;">
<select name="district" data-area="天河区" lay-filter="district">
<option value="">选择区</option>
</select>
</div>
</div>
</div>
<p style="margin-top: 40px;"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button></p>
</form>
<!-- 地址选择插件 end -->
</div>
<div class="layui-col-md3"></div>
</div>
</div>
<script type="text/javascript" src="static/js/city-picker.js"></script>
<script type="text/javascript">
//config的设置是全局的
layui.config({
base: './static/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
common: 'common' //如果 common.js 是在根目录，也可以不用设定别名
});
layui.use(['form', 'common'], function(){
var common = layui.common,
form = layui.form;
//do something...
//三级地址联动
common.showCity('province', 'city', 'district');
//监听提交
form.on('submit(formDemo)', function(data){
var resData = data.field,
province = resData.province,
city = resData.city,
district = resData.district;
console.log(province, city, district)
// 通过地址code码获取地址名称
var address = common.getCity({
province,
city,
district
});
console.log(address);
return false;
});
});
</script>
</body>
</html>
附源码链接: https://pan.baidu.com/s/1eJhHGVkqUMoajObJYBFgGw?pwd=g3x3 提取码: g3x3
首先添加样式类.table-header-fixed { top: 0; position: fixed; z-index: 999;}在table表格渲染完后，增加js代码如下var headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离$(window).scroll(functio
在数据表格上，操作按钮太多的时候，页面展示不全，下拉显示所有按钮时，点击无效。需要在js中添加代码，放在layui.use()里面即可。$(document).off('mousedown', '.layui-table-grid-down') .on('mousedown', '.layui-table-grid-down&#
layuimini后台点击右侧菜单实现重新加载页面
`layui-disabled` 类和 `readonly` 属性都是用来禁用表单元素的，但是它们的作用有所不同。`layui-disabled` 类是 layui 自定义的禁用样式类，它可以禁用表单...
layui layui redio 表单提交验证
在Layui中，可以使用表单验证组件来实现身份证验证的功能。主要步骤如下：1. 在HTML页面中引入Layui的表单验证组件：2. 在HTML页面中添加一个表单，并给需要验证的输入框添加相应的属性和值...