用mobiscroll.js的treelist实现弹出下拉效果

首先跟上次说的一样，

第一步：引入js、css样式

1）mobiscroll-2.13.2.full.min.css

2）jquery.min.js

3）mobiscroll-2.13.2.full.min.js

第二步：html添加如下标签

   <label>选择学历：</label>        
    <ul id="treelist" >  
       <li value="1">小学</li>
       <li value="2">初中</li>
       <li value="3">高中</li>
       <li value="4">中专</li>  
       <li value="5">大专</li>
       <li value="6">本科</li>
       <li value="7">硕士</li>
       <li value="8">博士</li>
       <li value="9">博士后</li>    
    </ul>  
    <br/>  
    <label>选择班级：</label>        
    <ul id="treelist1" >  
       <li value="1">普通班</li>
       <li value="2">高级班</li>
       <li value="3">重点班</li>
       <li value="4">VIP班级</li>     
    </ul>  
   <br/>   

第三步：在js用mobiscroll的treelist绑定数据，渲染弹出框

$(function () {
      $("#treelist").mobiscroll().treelist({  
        theme: "android-ics light",  
        lang: "zh",  
        //定义弹出框选中项的默认值
        defaultValue: [Math.floor($('#treelist li').length/2)], 
        cancelText: "取消",
        headerText:"选择学历",    //显示弹出框title显示文本
        placeholder:"请选择学历",  //显示input的提示文本
        inputClass:'selectCss',   //添加input的样式（放入样式名）
        //返回自定义格式结果（原先选中是显示下标，改成显示文本）  
         formatResult: function (array) {  
             console.log($('#treelist>li').eq(array[0]).val());
            return $('#treelist>li').eq(array[0]).text() ;  
        }  
    }); 
    
     $("#treelist1").mobiscroll().treelist({  
        theme: "android-ics light",  
        lang: "zh",      
        defaultValue: [Math.floor($('#treelist1 li').length/2)],   
        cancelText: "取消",        
        headerText:"选择班级",    
        placeholder:"请选择班级",  
        inputClass:'selectCss',   
        //返回自定义格式结果（原先选中是显示下标，改成显示文本） 
         formatResult: function (array) {  
             console.log($('#treelist1>li').eq(array[0]).val());
            return $('#treelist1>li').eq(array[0]).text() ;  
        }  
    }); 

});

第四步：效果图显示

1）页面input弹出框显示

2）页面input加载和选中显示

参考来源：

https://www.cnblogs.com/Look_Sun/p/4482103.html