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

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

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

# select下拉框插件  # jquery下拉框插件  # jquery  # select下拉框  # bootstrap可编辑下拉框jquery.editable-select  # jQuery实现select下拉框获取当前选中文本、值、索引  # 利用jquery获取select下拉框的值  # 基于jQuery的select下拉框选择触发事件实例分析  # jquery.multiselect多选下拉框实现代码  # jQuery制作简洁的多级联动Select下拉框  # jQuery操作select下拉框的text值和value值的方法  # jquery动态加载select下拉框示例代码  # jQuery操作选中select下拉框的值代码实例  # 下拉框  # 是一个  # 有个  # 下载地址  # 才会  # 把它  # 用了  # 弹出  # 这块  # 现时  # 既可  # 服务平台  # 框中  # 加载  # 到哪里  # effects  # false  # fade  # filter  # noMean 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何用搬瓦工VPS快速搭建个人网站？  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  Laravel如何使用Livewire构建动态组件？（入门代码）  Android滚轮选择时间控件使用详解  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  手机网站制作与建设方案,手机网站如何建设？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  教你用AI润色文章，让你的文字表达更专业  高防服务器如何保障网站安全无虞？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  如何将凡科建站内容保存为本地文件？  Linux系统运维自动化项目教程_Ansible批量管理实战  如何在新浪SAE免费搭建个人博客？  Laravel如何处理和验证JSON类型的数据库字段  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  Laravel如何创建自定义中间件？（Middleware代码示例）  原生JS获取元素集合的子元素宽度实例  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  如何在建站宝盒中设置产品搜索功能？  Laravel如何实现用户注册和登录？（Auth脚手架指南）  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  英语简历制作免费网站推荐,如何将简历翻译成英文？  JavaScript常见的五种数组去重的方式  如何选择PHP开源工具快速搭建网站？  如何用wdcp快速搭建高效网站？  高端云建站费用究竟需要多少预算？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  如何快速生成橙子建站落地页链接？  Laravel API资源类怎么用_Laravel API Resource数据转换  C++时间戳转换成日期时间的步骤和示例代码  公司门户网站制作流程,华为官网怎么做？  常州企业网站制作公司,全国继续教育网怎么登录？  EditPlus中的正则表达式 实战(2)  如何在IIS7上新建站点并设置安全权限？  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  JavaScript模板引擎Template.js使用详解  nginx修改上传文件大小限制的方法  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  canvas 画布在主流浏览器中的尺寸限制详细介绍  JavaScript如何实现错误处理_try...catch如何捕获异常？  php 三元运算符实例详细介绍  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】