iosSelect级联选择器插件 最多支持6级 本次演示为4级
<link href="~/assets/apps/iosSelect/iosSelect.css?date=20200521" rel="stylesheet" />
<script src="~/assets/apps/iosSelect/iosSelect.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*只需要引用一个js、css即可*@
<link href="~/assets/apps/iosSelect/iosSelect.css" rel="stylesheet" />
<script src="~/assets/apps/iosSelect/iosSelect.js"></script>
<title>iosSelect级联选择</title>
</head>
<body>
<p id="showDom">{{Screen.region}}</p>
</div>
</body>
</html>
效果图
<script>
//区域select
var showDom = document.querySelector('#showDom');// 绑定一个触发元素
var valDom = document.querySelector('#valDom'); // 绑定一个存储结果的元素
showDom.addEventListener('click', function () { // 添加监听事件
$("#Eselect").css("display", "block")
$(".olay ios-select-widget-box four-level-box").css("position", "relative");
$(".olay ios-select-widget-box four-level-box").css("top", "0");
var val = showDom.dataset['id']; //获取元素的data-id属性值
var val = showDom.dataset['value']; //获取元素的data-value属性值
// 实例化组件
var example = new IosSelect(4, // 第一个参数为级联层级，演示为4 最高6
[app.IosSelectdata.firstStage, app.IosSelectdata.SecondLevel, app.IosSelectdata.TheThirdLevel, app.IosSelectdata.TheFourthLevel], // 演示数据
{
container: '.container', // 容器class
title: '区域', // 标题
itemHeight: 30, // 每个元素的高度
itemShowCount: 5, // 每一列显示元素个数，超出将隐藏
oneLevelId: app.IosSelectdata.oneLevelId,// 第一级默认值
twoLevelId: app.IosSelectdata.twoLevelId,// 第二级默认值
threeLevelId: app.IosSelectdata.threeLevelId,// 第三级默认值
fourLevelId: app.IosSelectdata.fourLevelId,
relation: [1, 1, 1], //是否关联 按照顺序 0：不关联，1：关联 本次全部关联
callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj) { // 用户确认选择后的回调函数
showDom.dataset['id'] = selectOneObj.id;
app.IosSelectdata.oneLevelId = selectOneObj.id;
app.IosSelectdata.twoLevelId = selectTwoObj.id;
app.IosSelectdata.threeLevelId = selectThreeObj.id;
app.IosSelectdata.fourLevelId = selectFourObj.id;
app.contents = selectOneObj.value + "-" + selectTwoObj.value + "-" + selectThreeObj.value + "-" + selectFourObj.value;
app.Screen.region = selectOneObj.value + "-" + selectTwoObj.value + "-" + selectThreeObj.value + "-" + selectFourObj.value;
},
fallback: function (e) {//取消选择的回调
$("#Eselect").css("display", "none")
},
maskCallback: function (e) {//点击背景层关闭组件的回调
$("#Eselect").css("display", "none")
},
});
});
var app = new Vue({
el: '#app',
data: {
IosSelectdata: {
firstStage: [{ 'id': '10001', 'value': '演示数据1' }, { 'id': '10002', 'value': '演示数据2' }],
SecondLevel: [
{ "id": "130100", "value": "1222", "parentId": "10001" },
{ "id": "7895", "value": "1.22", "parentId": "10001" },
{ "id": "130110", "value": "2222", "parentId": "10002" }
],
TheThirdLevel: [{ "id": "1234", "value": "1333", "parentId": "130100" },
{ "id": "147", "value": "全部", "parentId": "7895" },
{ "id": "8523", "value": "2333", "parentId": "130110" }],
TheFourthLevel: [{ "id": "1w234", "value": "1444", "parentId": "1234" },
{ "id": "www", "value": "2444", "parentId": "147" },
{ "id": "eee", "value": "3444", "parentId": "8523" }],
//默认选中值 要给每个层级分别赋值
oneLevelId: "全部",
twoLevelId: "全部_全部",
threeLevelId: "全部_全部_全部",
fourLevelId: "全部_全部_全部_全部",
},//区域数据
},
})
</script>
参考链接：https://github.com/zhoushengmufc/iosselect