用mobiscroll.js的treelist实现弹出下拉效果-白红宇

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

阅读量：6200 次

发布时间：2019-06-21

本文共 1696 字，大约阅读时间需要 5 分钟。

首先跟上次说的一样，

第一步：引入js、css样式

1）mobiscroll-2.13.2.full.min.css

2）jquery.min.js

3）mobiscroll-2.13.2.full.min.js

第二步：html添加如下标签

第三步：在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

你可能感兴趣的文章