首页 > 其他分享> 文章详细

iosSelect级联选择器的使用

2020-11-24 12:00:30 阅读：356 来源： 互联网

标签：级联 app value id parentId var IosSelectdata 选择器 iosSelect

iosSelect级联选择器插件最多支持6级本次演示为4级

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />

@*只需要引用一个js、css即可*@

<title>iosSelect级联选择</title>
</head>
<body>

<p id="showDom">{{Screen.region}}</p>

</div>
</body>
</html>

效果图

//区域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

标签：级联,app,value,id,parentId,var,IosSelectdata,选择器,iosSelect
来源： https://www.cnblogs.com/jmf0529/p/14029492.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iosSelect级联选择器的使用