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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
node.js实现端口转发
Apr 14 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
js cookie实现记住密码功能
Jan 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中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
JS实现小星星特效
2019/12/24 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
eBay加拿大站:eBay.ca
2019/06/20 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
干部考核工作总结
2015/08/12 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang