首先跟上次说的一样,

第一步:引入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

用mobiscroll.js的treelist实现弹出下拉效果相关推荐

  1. 解决火狐Firefox浏览器一点击地址栏就弹出下拉搜索建议菜单的问题

    在使用火狐浏览器的时候,总是会在点地址栏的时候,弹出搜索建议下拉菜单,遮挡了下方的页面,影响使用, 解决方法: 以后再点击地址栏就不会弹出冗长的 搜索建议下拉菜单了. march the 03rd 2 ...

  2. html点击下拉框无反应,js模拟点击select,但是没有弹出下拉框。

    实在是找不到很好的解决方法了,于是利用列表和js来模拟select了. 代码如下,如果有更好的方法请告诉我一声,谢谢. Document body { display: flex; flex-dire ...

  3. 反射效果,自己公司内部编码,在text上输入内容后,通过输入内容查询数据库,弹出下拉框

    js页面:通过楦头编号光标移除事件,查询尺码 /*** 楦头编号点击事件,反射模糊查询*/ $(function(){$("#sizeName").attr("hidde ...

  4. js在IE下面弹出打开和保存文件的对话框

    js在IE下面弹出打开和保存文件的对话框 2010-08-11 13:39:16|  分类: JavaScript |  标签: |字号大中小 订阅 <html> <head> ...

  5. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  6. html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function    locki ...

  7. html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享

    本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查 ...

  8. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...

  9. js仿苹果风格弹出框alert插件

    下载地址 js仿苹果风格弹出框alert插件,多种调用方式. dd:

最新文章

  1. 2021年大数据常用语言Scala(七):基础语法学习 条件表达式
  2. HBase 参考指南 3.0 翻译活动期待大家的参与 | ApacheCN
  3. 转发高人文章:以前写的一些有关代码签名/时间戳数字证书的东东
  4. 谁拿了最多奖学金pascal程序
  5. .NET5.0 Preview 8 开箱教程
  6. Alios Things的Flash划分规则
  7. matlab状态方程 传递函数 可控性,实验一matlab系统的传递函数和状态空间表达式的转换...
  8. Summary - 2017
  9. PostgreSQL 9.6 同步多副本 与 remote_apply事务同步级别 应用场景分析
  10. linux 编译chromium,简易编译Chromium OS内核教程
  11. Oracle 创建新用户后无法登入,显示user lacks CREATE SESSION privilege; logon denied
  12. https开头的网址是什么意思_网址是什么意思?基础知识普及
  13. 创新工场李开复:漫延——中国移动互联网的2011年
  14. 4键电子手表说明书_电子表的使用方法 电子手表使用说明书
  15. java closed_Java开发网 - ZipFile closed是什么错误?
  16. 复杂UI卡顿问题没想到还能这么优化?
  17. 天牛须和贪心算法_天牛须算法
  18. turtle库——绘制八边形、八角图形以及叠边形图形
  19. 混淆矩阵 灵敏度 特异度 阳性预测值 阴性预测值 阳性似然比 阴性似然比
  20. 公司注册的企业邮箱竟然有邮件撤回的功能?!

热门文章

  1. Linux文件上传下载sz 和 rz 命令
  2. 15道AI 机器学习笔试题(暂时没有答案)
  3. xx云网络实施方案案例
  4. 【CentOS】又是一篇Shell
  5. MacOs终端忽略大小写
  6. XE中rectangle实现渐变
  7. ubuntu PIL出错 重新安装
  8. 我的迅雷资源博客已经开通!
  9. 由于没有公钥,无法验证下列签名 :NO_PUBKEY 的解决方法
  10. 光学定位与追踪技术_贺岁片《疯狂外星人》中徐峥出演外星人?幕后动捕技术了解一下...