jQuery教程之微信页面设计weui（4）——Pciker微信页面中实现下拉菜单-职坐标

jQuery教程之微信页面设计weui（4）——Pciker微信页面中实现下拉菜单

沉沙 2019-04-12 来源：阅读 2170 评论 0

摘要：本篇文章探讨了jQuery教程之微信页面设计weui（4）——Pciker微信页面中实现下拉菜单，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了jQuery教程之微信页面设计weui（4）——Pciker微信页面中实现下拉菜单，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery教程之微信页面设计weui（4）——Pciker微信页面中实现下拉菜单

1.源代码中的选择器
在操作反馈中，picker页面的实现

html：
复制代码
<div>
    <div>
        <h1>Picker</h1>
        <p>多列选择器，需要配合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>
<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 id="container"></div>
   <script type="text/html" id="tpl_home">
<div>
    <div>
         <a href="javascript:history.go(-1)"><img src="./image/button_03.png" alt="" /></a>
            <span>安规学习</span>
         <img src="./image/button_05.png" alt="" />
        </h1>
    </div>
    <div style="margin: 40px">
        <div>请选择部门：</div>
        <form name="form1">
            <div>
            <div class="weui-cell weui-cell_select" >

                <div>
                    <select name="department" onChange= "getLesson()">
                        <option value="0">请选择部门</option>
                        <option value="基建部">基建部</option>''
                        <option value="质检部">质检部</option>
                        <option value="检测维修部">检测维修部</option>
                    </select>
                </div>
            </div>
        </div>
        <div>请选择课程：</div>
        <div>
            <div class="weui-cell weui-cell_select ">

                <div >
                    <select name="lesson">
                       <option value="0">请选择课程</option>
                    </select>
                </div>
            </div>
        </div>
        </form>
    </div>
    <div>
            <a class="weui-btn weui-btn_primary" href="javascript:void(0)" id="showTooltips" onclick="">确定</a>
        </div>

</div>

</script>

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