用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
平时多记记,到用时才能看看,记录你的进步,分享你的成果