<!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>