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 操作下拉列表框实现代码
Feb 22 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
js实现简易计算器小功能
Nov 18 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php实现点击可刷新验证码
2015/11/07 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python实现的自动发送消息功能详解
2019/08/15 Python
详解Python中的分支和循环结构
2020/02/11 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python opencv进行图像拼接
2020/03/27 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
int和Integer有什么区别
2013/05/25 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
关于环保的演讲稿
2014/05/10 职场文书
消防安全宣传标语
2014/06/07 职场文书
药店采购员岗位职责
2014/09/30 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014年稽查工作总结
2014/12/20 职场文书
小学入学感言
2015/08/01 职场文书
高效课堂教学反思
2016/02/24 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书