weui下拉选框——学习总结

zhaoliu100125 2021-09-02 原文

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        
        <title> weui picker二级联动</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/>
        <style type="text/css">
            a{
                display: inline-block;
                margin-right: 20px;
            }
            #box{
                width: 120px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: #ccc;
                margin-left: 60px;
                margin-bottom: 50px;
                margin-top: 20px;
            }
            .timer{
                width: 120px;
                height: 50px;
                background-color:  #ccc;
                margin-left: 60px;
                line-height: 50px;
                text-align: center;
            }
            span{
                font-size: 15px;
                color: #CE3C39;
            }
        </style>
    </head>
    <body>
        
        <a id="box">weui二级联动</a>  <span id="pickerBox"></span>
        <a class="timer">weui-时间选择</a><span id="datepickerBox"></span>
        <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
        <script type="text/javascript">
            var arr = [
                    {
                        label:\'飞机票\',
                        value:0,
                        children:[
                            {
                                label:\'经济舱\',
                                value:1
                            },
                            {
                                label:\'商务舱\',
                                value:2
                            },
                            {
                                label:\'头等舱\',
                                value:3
                            },
                        ]
                    },
                    {
                        label:\'汽车票\',
                        value:1,
                        children:[
                            {
                                label:\'快车\',
                                value:1
                            },
                            {
                                label:\'慢车\',
                                value:2
                            }
                        ]
                    },
                    {
                        label:\'火车票\',
                        value:2,
                        children:[
                            {
                                label:\'无座\',
                                value:1
                            },
                            {
                                label:\'有做\',
                                value:2
                            },
                            {
                                label:\'卧铺\',
                                value:3
                            },
                        ]
                    }
                ]
            
            document.getElementById(\'box\').onclick=function(){
                weui.picker(
                    arr,
                    {
                    onChange:function(res){
//                        console.log(res)
                    },
                    onConfirm:function(res){
                        var sonArr = arr[res[0]];
                        var index = arr.indexOf(sonArr);
                        console.log(index)
                        console.log(res[0])
                        console.log(arr[res[0]].label)
                        console.log(res[1])
                        var sonIndex = res[1]-1
                        console.log(arr[res[0]].children[sonIndex].label)
                        document.getElementById(\'pickerBox\').innerHTML=arr[res[0]].label+\'--\'+arr[res[0]].children[sonIndex].label;
                    }
                })
            }
            
            document.getElementsByClassName(\'timer\')[0].onclick=function(){
                weui.datePicker({
                    start:1990,
                    end:2090,
                    defaultValue:[2018,1,1],
                    onChange:function(res){
                        
                    },
                    onConfirm:function(res){
                        console.log(res)
                        document.getElementById(\'datepickerBox\').innerHTML=res
                    }
                })
            }
        </script>
    </body>
</html>