微信页面设计weui的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对象
要将下拉框的所有选项删除有两种方法，
第一种方法就是遍历删除：

var l=myselect.length;
for(var i=0;i<l;i++){
   myselect.options[i]=null;
}

第二种方法比较简单，因此一般都使用此方法：

myselect.length=0;

频道导航

微信页面设计weui的Pciker实现下拉菜单

您可能感兴趣的文章: