省市县三级地图,三个select联动效果
基于layui实现的省市县区三级联动下拉选择器
关于layui
这里不做介绍，直戳我阅读
关于本省市区级联下拉选择器
本选择器已经将它封装成一个layui的插件，使用起来非常方便，支持一个页面中使用多个省市区选择器，并且支持选择结果回调，支持自定义lay-filter。
使用方法以及一些约定
- html部分
整个选择器需要使用一个父标签包裹，如下使用了id=“area-picker”，并且分别给省、市、区的select加上province-selector、city-selector、county-selector，用来区分对应的内容标签，这里也可以自定义lay-filter，当一个页面有多个省市区选择器的时候，需要每组lay-filter命名不一样，因此，最好的方式是，不手动设置lay-filter。每个select可以指定初始值，在select上写data-value=""即可。初始值也可以通过js设置。
```javascript
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
2.js部分
引入layarea, 根据指定选择器渲染标签
//配置插件目录
layui.config({
base: './mods/'
, version: '1.0'
});
JS
layui.use(['layer', 'form', 'layarea'], function () {
var layer = layui.layer
, form = layui.form
, layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
// data: {
// province: '广东省',
// city: '深圳市',
// county: '龙岗区',
// },
change: function (res) {
//选择结果
console.log(res);
}
});
});
DEMO下载地址
省市县区三级联动下拉
.
.
.
单个下拉框实现多级联动效果
附DEMO一篇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="hsiangleev,layui扩展">
<title>layui扩展无限级联选择器</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="stylesheet" href="cascader.css" media="all">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon.ico">
</head>
<body>
<button class="layui-btn">reload</button>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<input type="text" id="a" class="layui-input" readonly="readonly">
</div>
</div>
<script src="../layui/layui.js"></script>
<script>
layui.config({
base: "../layui/lay/mymodules/"
}).use(['form',"jquery","cascader","form"], function(){
var $ = layui.jquery;
var cascader = layui.cascader;
var data = [
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
},
{
value: 'B',
label: 'b',
children: [
{
value: 'AA2',
label: 'aa2',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
},
{
value: 'BBB3',
label: 'bbb3'
}
]
}
]
},
{
value: 'BBB3',
label: 'bbb3'
}
]
},
{
value: 'BB2',
label: 'bb2',
children: [
{
value: 'AAA4',
label: 'aaa4',
},
{
value: 'BBB4',
label: 'bbb4'
}
]
}
]
},
{
value: 'C',
label: 'c',
}
]
var cas=cascader({
elem: "#a",
data: data,
// url: "/aa",
// type: "post",
// triggerType: "change",
showLastLevels: true,
// where: {
// a: "aaa"
// },
value: ["B", "BB2", "BBB4"],
// changeOnSelect: true,
success: function (valData,labelData) {
console.log(valData,labelData);
// 选择后的值要想与data里的数据绑定,直接在此绑定,
// 如: this.XX = valData;
// 不要去html中 v-model 因为添加了v-model,级联选择器选择联动后,
// 在其他input输入内容的时候,级联的内容会置空, 而且不能双向绑定数据
}
});
var reloadData=[
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
}
]
$(".layui-btn").on("click",function() {
cas.reload({
data: reloadData,
value:['A','BB1']
})
})
});
</script>
</body>
</html>
DEMO下载地址
单个下拉框实现多级联动效果