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与其他库冲突的方法介绍
Jan 02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
js 轮播效果实例分享
Dec 28 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
js动态生成表格(节点操作)
Jan 12 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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
js资料toString 方法
2007/03/13 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
Python random模块常用方法
2014/11/03 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
深入理解Python变量与常量
2016/06/02 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
巴西网上药房:onofre
2016/11/21 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
小区停车场管理制度
2014/01/27 职场文书
企业申诉管理制度
2014/01/30 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
SQL基础的查询语句
2021/11/11 MySQL