zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    OpenCV+iOS开发使用文档
    Mac下OpenCV开发
    vs2010+cuda5.0+qt4.8
    对于基类添加虚析构函数问题
    PMVS学习中学习c++
    解决ubuntu上opengl的问题
    js中const,var,let区别
    phpstorm 快捷键
    Chrome 控制台console的用法
    【PHP】进一法取整、四舍五入取整、忽略小数等的取整数方法大全
  • 原文地址:https://www.cnblogs.com/zhaoliu100125/p/8278972.html
Copyright © 2011-2022 走看看