<!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
Layui模块citypicker城市选择器没有找到手册，看代码发现了如下代码：CityPicker.DEFAULTS = { simple: false, responsive: tru...
//找到layui tab对应tabId进行iframe刷新var tabthis=$('.layuimini-tab > .layui-tab-title > li[lay-id="'...
ea.table.render({ toolbar: ['refresh'], init: init, limit: Number.MAX_VALUE,page: fals...
最近使用表单引入layui提交获取不到数据，原来是因为再保证有name属性的情况下需要再form元素上加上layui-form类
done: function (res, curr, count) { var that = this.elem.next(); res.data.forEach(function (it...
在使用layer.open时，常常要在弹窗中再进行弹窗；有时候会出现第二次弹窗不是在最顶层的情况，通过添加zIndex和parent可以解决这个问题// 父级open layer.open({ ...