weui下拉選框——學習總結

時間 2019-12-10
標籤 weui 下拉學習總結简体版
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。