页⾯设计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) {
//
console.log(result);
},
onConfirm:function (result) {
console.log(result);
}
});
});
$('#showDatePicker').on('click',function () {
//
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="(-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" >
<div class="weui-cells__title">请选择部门：</div>
<form name="form1">
<div class="weui-cells">
<div class="weui-cell weui-cell_select" >
html下拉菜单的制作方法<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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。