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>

 

转载于:https://www.cnblogs.com/zhaoliu100125/p/8278972.html

你可能感兴趣的:(weui下拉选框——学习总结)