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 相关文章推荐
动态加载js和css(外部文件)
Apr 17 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
js获取Get值的方法
Sep 29 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
详解javascript void(0)
Jul 13 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
基于vue中的scoped坑点解说
Sep 04 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
浅析vue-router中params和query的区别
2019/12/24 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Vue实现计算器计算效果
2020/08/17 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python pymongo模块用法示例
2018/03/31 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python enumerate内置库用法解析
2020/02/24 Python
文秘应聘自荐书范文
2014/02/18 职场文书
企业文明单位申报材料
2014/05/16 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
银行求职信范文
2019/05/13 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
python中subplot大小的设置步骤
2021/06/28 Python