移动端插件weui的多级下拉框,单级下拉框的前台代码书写

多级下拉框和单级下拉框可以在weui.js的代码中Ctrl+F搜索"级联picker"来看源代码

 在这篇文章中，我主要为大家说一下移动端插件weui的多级下拉框、单级下拉框这两种下拉框的前台代码应该如何书写。

1.多级下拉框:

      样式代码:

<div id="search_box" class="input_center_box">
            <div id="search_dqpc" class="input_center_box">
                <div id="dqpcdropdownlist" class="cjcx_select"  data-action=""></div>
            </div>
            
            <div id="search_xy" class="input_center_box">
                <div id="xydropdownlist" class="zc_select"  data-action=""></div>
            </div>
        </div>

     逻辑代码:

$("#search_dqpc").click(function(){
	        		      // 级联picker
	        		      weui.picker([
	        		      {
	        		          label: '本科生',
	        		          value: '1',
	        		          children: res.module[0]
	        		      } ,
	        		      {
	        		          label: '硕士生',
	        		          value: '2',
	        		          children: res.module[1]
	        		      },
	        		      {
	        		          label: '博士生',
	        		          value: '3',
	        		          children: res.module[2]
	        		      } 
	        		      ], {
	        		         className: 'custom-classname',
	        		         defaultValue: [1, res.module[0][0].value],  //默认显示顺序 
	        		         onChange: function (result) {               //改变时
	        		        	//查看当前批次下拉框的数据 
// 	        		             console.log(result)
	        		         },
	        		          onConfirm: function (result) {             //确认取消时 
	        		        	  //查看当前批次下拉框的数据 
// 	        		              console.log(result)
	        		              //替换当前批次下拉框的数据 
	        		              $("#dqpcdropdownlist").text(result[1].label);
	        		        	  //给当前批次赋值 
	        		              dqpc = result[1].value;
	        		        	  //给当前学生类别赋值
	        		              xslb = result[0].value;
	        		        	  //获取学院下拉框数据
	        		              getXy();
	        		          },
	        		         id: 'doubleLinePicker'
	        		      });
	        		 });

2.单级下拉框:

      样式代码:

<div id="search_box" class="input_center_box">
            <div id="search_dqpc" class="input_center_box">
                <div id="dqpcdropdownlist" class="cjcx_select"  data-action=""></div>
            </div>
            
            <div id="search_xy" class="input_center_box">
                <div id="xydropdownlist" class="zc_select"  data-action=""></div>
            </div>        
        </div>

逻辑代码:

$("#search_xy").click(function(){
           			  // 单列picker
           		       weui.picker(arr, {
           		          className: 'custom-classname',
           		          defaultValue: [0],
           		          onChange: function (result) {
           		              console.log(result)
           		          },
           		          onConfirm: function (result) {
           		              console.log(result)
           		              //替换当前学院下拉框的数据 
                              $("#xydropdownlist").text(result[0].label);
                              //给当前学院赋值 
                              dqxy = result[0].value;
           		          },
           		          id: 'singleLinePicker'
           		       });
                    });