jQuery教程之微信页面设计weui(4)——Pciker微信页面中实现下拉菜单
沉沙 2019-04-12 来源 : 阅读 139 评论 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>
  <!--部门选择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;
   

      本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

X
免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160