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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
一个Action如何调用两个不同的方法
2014/05/22 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
用原生js做单页应用
2017/01/17 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python解析json实例方法
2013/11/19 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python中cPickle类使用方法详解
2018/08/27 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
财务会计专业毕业生自荐信
2013/10/19 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
工作迟到检讨书
2014/02/21 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
会计学专业自荐信
2014/06/25 职场文书
先进事迹演讲稿
2014/09/01 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
python pygame 开发五子棋双人对弈
2022/05/02 Python