select下拉框插件jquery.editable-select详解


Posted in Javascript onJanuary 22, 2017

项目中有个需求,下拉框既可以下拉选择,也可以手动填写

html代码

<span>数据来源</span>
 <select class="source">
 <option value="0">人工导入</option>
 <option value="1">数据服务平台</option>
 </select>

js代码

$('#noMean').editableSelect({
 filter:false,
 effects: 'fade',
 duration: 200,
 onCreate:function () {
 console.log("下拉框创建")
 },
 onShow:function () {
 console.log("下拉框显示")
 },
 onHide:function () {
 console.log("下拉框隐藏")
 },
 onSelect:function () {
 console.log("下拉框选项被选中")
 }
 }

获取值

$(".noMean").val()

用了这个插件以后,这块是一个input,type="text"

参数

filter  选择option以后,是否过滤  默认 true

effects  点击的时候,下拉框的过渡效果  有default,slide,fade三个值,默认是default

duration  过渡效果时间  默认是fast  值可以是fast和slow,也可以是数字

appendTo  下拉框如果弹出框效果,这个值才会用到,显示把它加载到哪里

trigger  下拉框列表如何触发 值是"focus", "manual"  默认是focus

方法

onCreate:当editableSelect方法生效时触发。

onShow:当下拉框出现时触发。

onHide:当下拉框隐藏时触发。

onSelect:当下拉框中的选项被选中时触发。

参考地址:

https://www.npmjs.com/package/jquery-editable-select  npm安装

http://indrimuska.github.io/jquery-editable-select/  demo地址

https://github.com/zhaobao1830/jquery-editable-select  下载地址

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
Prototype Object对象 学习
Jul 12 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
python实现批量图片格式转换
2020/06/16 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python代码需要缩进吗
2020/07/01 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
会计助理岗位职责
2014/02/17 职场文书
勤俭节约倡议书
2014/04/14 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers