用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
用mobiscroll.js的treelist实现弹出下拉效果相关推荐
- 解决火狐Firefox浏览器一点击地址栏就弹出下拉搜索建议菜单的问题
在使用火狐浏览器的时候,总是会在点地址栏的时候,弹出搜索建议下拉菜单,遮挡了下方的页面,影响使用, 解决方法: 以后再点击地址栏就不会弹出冗长的 搜索建议下拉菜单了. march the 03rd 2 ...
- html点击下拉框无反应,js模拟点击select,但是没有弹出下拉框。
实在是找不到很好的解决方法了,于是利用列表和js来模拟select了. 代码如下,如果有更好的方法请告诉我一声,谢谢. Document body { display: flex; flex-dire ...
- 反射效果,自己公司内部编码,在text上输入内容后,通过输入内容查询数据库,弹出下拉框
js页面:通过楦头编号光标移除事件,查询尺码 /*** 楦头编号点击事件,反射模糊查询*/ $(function(){$("#sizeName").attr("hidde ...
- js在IE下面弹出打开和保存文件的对话框
js在IE下面弹出打开和保存文件的对话框 2010-08-11 13:39:16| 分类: JavaScript | 标签: |字号大中小 订阅 <html> <head> ...
- Bootstrap入门(二十九)JS插件6:弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
- html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...
- js仿苹果风格弹出框alert插件
下载地址 js仿苹果风格弹出框alert插件,多种调用方式. dd:
最新文章
- 2021年大数据常用语言Scala(七):基础语法学习 条件表达式
- HBase 参考指南 3.0 翻译活动期待大家的参与 | ApacheCN
- 转发高人文章:以前写的一些有关代码签名/时间戳数字证书的东东
- 谁拿了最多奖学金pascal程序
- .NET5.0 Preview 8 开箱教程
- Alios Things的Flash划分规则
- matlab状态方程 传递函数 可控性,实验一matlab系统的传递函数和状态空间表达式的转换...
- Summary - 2017
- PostgreSQL 9.6 同步多副本 与 remote_apply事务同步级别 应用场景分析
- linux 编译chromium,简易编译Chromium OS内核教程
- Oracle 创建新用户后无法登入,显示user lacks CREATE SESSION privilege; logon denied
- https开头的网址是什么意思_网址是什么意思?基础知识普及
- 创新工场李开复:漫延——中国移动互联网的2011年
- 4键电子手表说明书_电子表的使用方法 电子手表使用说明书
- java closed_Java开发网 - ZipFile closed是什么错误?
- 复杂UI卡顿问题没想到还能这么优化?
- 天牛须和贪心算法_天牛须算法
- turtle库——绘制八边形、八角图形以及叠边形图形
- 混淆矩阵 灵敏度 特异度 阳性预测值 阴性预测值 阳性似然比 阴性似然比
- 公司注册的企业邮箱竟然有邮件撤回的功能?!