微信页面设计weui源代码（4）——Pciker微信页面中实现下拉菜单
1.源代码中的选择器
在操作反馈中，picker页面的实现
html：
<div class="page"> <div class="page__hd"> <h1 class="page__title">Picker</h1> <p class="page__desc">多列选择器，需要配合js实现</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a> <a href="javascript:;" class="weui-btn weui-btn_default" id="showDatePicker">日期选择器</a> </div> </div>
js：
$('#showPicker').on('click',function () {
// json数据
weui.picker([
{
label:'飞机票',
value:0
},{
label:'火车票',
value:1
},{
label:'的士票',
value:2
},{
label:'公交票',
value:3
},{
label:'其他的',
value:4
}],{
onChange:function (result) {
// body...
console.log(result);
},
onConfirm:function (result) {
console.log(result);
}
});
});
$('#showDatePicker').on('click',function () {
// body...
weui.datePicker({
start:1990,
end:new Date().getFullYear(),
onChange:function (result) {
console.log(result);
},
onConfirm:function (result) {
console.log(result);
}
});
});
2.微信页面中jquery mobile中实现下拉菜单
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>安规学习</title> <link rel="stylesheet" href="css/weui.css"/> <link rel="stylesheet" href="css/example.css"/> <link rel="stylesheet" type="text/css" href="css/header.css"> <script src="js/zepto.min.js"></script> <script type="text/javascript" src="js/jweixin-1.0.0.js"></script> <script src="js/weui.min.js"></script> <script src="js/example.js"></script> </head> <body ontouchstart> <div class="container" id="container"></div> <script type="text/html" id="tpl_home"> <div class="page"> <div class="header"> <a href="javascript:history.go(-1)"><img src="./image/button_03.png" alt="" class="left" /></a> <span>安规学习</span> <img src="./image/button_05.png" alt="" class="right" /> </h1> </div> <div class="page__bd" style="margin: 40px"> <div class="weui-cells__title">请选择部门：</div> <form name="form1"> <div class="weui-cells"> <div class="weui-cell weui-cell_select" > <div class="weui-cell__bd"> <select class="weui-select" name="department" onChange= "getLesson()"> <option value="0">请选择部门</option> <option value="基建部">基建部</option>'' <option value="质检部">质检部</option> <option value="检测维修部">检测维修部</option> </select> </div> </div> </div> <div class="weui-cells__title">请选择课程：</div> <div class="weui-cells"> <div class="weui-cell weui-cell_select "> <div class="weui-cell__bd" > <select class="weui-select" name="lesson"> <option value="0">请选择课程</option> </select> </div> </div> </div> </form> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:void(0)" id="showTooltips" onclick="">确定</a> </div> </div> </script> <!--部门选择javscript--> <script type="text/javascript"> var lesson = [ ['变电部分','配电部分','线路部分'], ['质量安全规范','行为安全规范'], ['检测安全','检测规范'] ]; function getLesson() { // 得到部门下拉框对象 var sltDepartment = document.form1.department; //alert(sltDepartment); //获得课程下拉框对象 var sltLesson = document.form1.lesson; //获得相对应部门的课程数组 var departmentLesson = lesson[sltDepartment.selectedIndex-1]; //清空课程下拉列表，仅保留提示选项 sltLesson.length = 1; for(var i=0;i<departmentLesson.length;i++){ sltLesson[i+1] = new Option(departmentLesson[i],departmentLesson[i]); } } </script> </body> </html>
如果对js不大熟悉，可以看看下面关于js处理select对象的内容：
1、使用selectedIndex属性获取当前选项的索引
下拉框的选项是一个线性数组，每个选项都有一个索引，selectedIndex表示当前被选中的选项的索引号。结合options属性，可以得到被选中的option对象，从而对其做进一步的处理。当下拉框可多选时，selectedIndex属性返回第一个被选中的索引。
selectedIndex是个只读的属性，想把通过索引指定的下拉框的项设置为选中状态，可以设置option对象的selected=true来实现。
2、为select对象添加一个选项
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i])表示创建一个值为provinceCity[i]，文本为provinceCity[i]的option对象，sltCity是页面上的city对象，i+1指定新添选项的位置。
3、清空一个select对象
要将下拉框的所有选项删除有两种方法，
第一种方法就是遍历删除：
1 var l=myselect.length; 2 for(var i=0;i<l;i++){ 3 myselect.options[i]=null; 4 }
第二种方法比较简单，因此一般都使用此方法：
myselect.length=0;
