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入门第一课 jQuery选择符
Mar 14 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
npm 语义版本控制详解
Sep 10 Javascript
小程序两种滚动公告栏的实现方法
Sep 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
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JavaScript中数组继承的简单示例
2015/07/29 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
vant实现购物车功能
2020/06/29 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python实现发送邮件功能代码
2017/12/14 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
温馨提示标语
2014/06/26 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
介绍长城的导游词
2015/01/30 职场文书
房屋维修申请报告
2015/05/18 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python