<!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>
浙公网安备 33010602011771号