脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → select下拉框插件jquery.editable-select

select下拉框插件jquery.editable-select详解

 更新时间：2017年01月22日 10:58:18   作者：zhaobao1830  
本篇文章主要介绍了select下拉框插件jquery.editable-select。具有很好的参考价值，下面跟着小编一起来看下吧

项目中有个需求，下拉框既可以下拉选择，也可以手动填写

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  下载地址

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js实现常用排序算法

    js实现常用排序算法

    这篇文章主要为大家详细介绍了js实现常用排序算法的代码，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 能在网页中写字和能擦写的js程序

    能在网页中写字和能擦写的js程序

    从经典论坛发现的一个可以在网页中写字和有擦除功能的javascript代码
    2008-04-04
  • JavaScript中的数值范围介绍

    JavaScript中的数值范围介绍

    这篇文章主要介绍了JavaScript中的数值范围介绍,本文是对JavaScript中Number类型的追根究底,读完本文将会对Number类型有一个彻底了解,需要的朋友可以参考下
    2014-12-12
  • JS+CSS实现电子商务网站导航模板效果代码

    JS+CSS实现电子商务网站导航模板效果代码

    这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript lodash常见用法系列小结

    JavaScript lodash常见用法系列小结

    本篇文章主要介绍了JavaScript lodash用法小结，非常不错，具有参考借鉴价值，对于Javascript lodash教程感兴趣的同学可以参考一下
    2016-08-08
  • IE和Firefox在JavaScript应用中的兼容性探讨

    IE和Firefox在JavaScript应用中的兼容性探讨

    今天在使用CSS属性的时候发现"cursor:hand;"在Firefox中鼠标不会变为手型，后来上网搜索了一下资料，发现hand这个cursor属性在Firrefox中不兼容，使用"cursor:pointer"就都可以显示了。
    2008-04-04
  • javascript命名约定(变量 函数 类 组件)

    javascript命名约定(变量 函数 类 组件)

    这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量，函数，类或者是组件的通用约定，虽然这些规则并不是强制性的，但是呢，他们却被一些JS社区所广泛采用，所以，了解他们还是很有必要的
    2023-03-03
  • JS实现普通轮播图特效

    JS实现普通轮播图特效

    这篇文章主要为大家详细介绍了JS实现普通轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js实现星星海特效的示例

    js实现星星海特效的示例

    这篇文章主要介绍了js实现星星海特效的示例，帮助大家制作网页特效，感兴趣的朋友可以了解下
    2020-09-09
  • JavaScript toDataURL图片转换问题解读

    JavaScript toDataURL图片转换问题解读

    这篇文章主要介绍了JavaScript toDataURL图片转换问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06

最新评论