iosSelect级联选择器的使用

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

官网

http://zhoushengfe.com/iosselect/website/index.html

备用网址: https://www.pengwf.com/iosselect/index.html

特点

0依赖，只需引用一个js和css即可
样式可自己定制，也可使用默认样式
一个页面同时实例化多个组件
jquery zepto angular vue react均适用
支持最多6级级联
支持设置高度和高度单位
适用于android和iOS设备(PC端支持IE9+，不过PC端上滑动体验不太实用)

起步

npm install iosselect

下载文件

点击下载文件到项目目录中，在HTML文件中插入以下代码，并按需调整路径。

<link rel="stylesheet" href="/static/css/iosSelect.css">
<script type="text/javascript" src="/static/js/iosSelect.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="~/assets/apps/Element/vue.js"></script>

    <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>
    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, // 每个元素的高度

                showAnimate: true,                   //是否显示动画

                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) {//取消选择的回调

                },
                maskCallback: function (e) {//点击背景层关闭组件的回调

                },
            });
    });

    var app = new Vue({
        el: '#app',
        data: {

            IosSelectdata: {

                // 如需关联 后一级的parentId要等于前一级的id
                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

学如逆水行舟不进则退！