前几天一个哥们使用之后,怎么都改不成可选择可编辑的状态,我远程后调试后发现, 是因为和其他引入的包冲突。

 在这里给大家提供个比较难发现的问题。。


 

最近做项目中用到了这个插件,正好分享下。

 1.  需要用的js包点击链接下载(包含一个demo)链接: 点击这里 提取码: rqry ,在项目中引入该js。

 

<script src="${pageContext.request.contextPath}/js/jquery.editable-select.js" type="text/javascript"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.editable-select.css">
 

  2.在需要使用这个功能的select中 赋id="editable-select"

 <select class="form-control" style="width: 180px;" id="editable-select" name="type">

  

  3.配置設置

 <script>
$(function(){
$('#editable-select').editableSelect({
effects: 'slide'
});
});
</script>
  • 选项设置

  • filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。
  • effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。
  • duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。
  • 事件

  • onCreate:当输入时触发。
  • onShow:当下拉时触发。
  • onHide:当下拉框隐藏时触发。
  • onSelect:当下拉框中的选项被选中时触发。

  这款插件允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。

   很好用 这个地方我就不上图了。

  在使用中会出现一个问题。

  我们用request.getParameter的时候获取不到的当前select里面的值。总是获取到值为-1。

  我们只需要修改jquery.editable-select.js 里面 我这边是204行,之前是“-1” ,把它改成(val)即可解决问题!

 

  如果帮助到您了,欢迎转载~

 大家有什么不明白的地方可以给我发送邮件共同探讨,有不足之处也望您及时指出!

  email: wdnnccey@gmail.com

 

使select文本框可编辑可选择(jQuery插件)的更多相关文章

  1. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  2. 使input文本框不可编辑的3种方法

    一:disabled disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字的颜色会变成灰色.d ...

  3. HTML:<input type="text">文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

  4. 实现表单input文本框不可编辑的三种方法

    感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...

  5. 使input文本框随其中内容而变化长度的方法

    最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...

  6. 获取select文本框的下拉菜单文字内容的两种方式

    <body> <div class="box"> <select id="sel"> <option value=&q ...

  7. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何让文本框可以输入,文本框可以编辑

    选中一个文本框,然后在属性中双击输入配置的OnMouseDown事件(也可以是别的事件,但都是通过这种方法)   在左侧点击写变量,然后输入类型改成VisuDialos.Numpad(数字键盘方式), ...

  8. MFC入门示例之静态文本框、编辑框

    点击按钮计算文本框中文本长度 void CMFCApplication1Dlg::OnBnClickedButton1() { CString strInput; GetDlgItemText(IDC ...

  9. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

随机推荐

  1. 使用C#把发表的时间改为几年前,几个月,几天前,几小时前,几分钟前,或几秒前

    我们在评论中往往会看到多少天前,多少小时前. 实现原理:现在时间-过去时间 得到的时间差来做比较 下面我定义了一个Helper类,大家直接引用即可,参数就是时间差,注意时间差类型是TimeSpan类型 ...

  2. jQuery之核心API

    1. jQuery.holdReady()方法:暂停或恢复.ready() 事件的执行.在$.holdReady()方法允许调用者延迟jQuery的ready事件.这种先进的功能,通常会被用来允许在 ...

  3. 测试对于list的sort与sorted的效率

    sorted from time import clock from random import randint start = clock() a = [randint(0,1000000) for ...

  4. Python matplotlib笔记

    可视化的工具有很多,如Tableau,各种JS框架,我个人感觉应该是学JS最好,因为JS不需要环境,每个电脑都有浏览器,而像matplotlib需要Python这样的开发环境,还是比较麻烦的,但是毕竟 ...

  5. ActiveMQ入门

    ActiveMQ简介 概要 开源 JMS-compliant 消息中间件message-oriented middleware(MOM) 松耦合,相对于RPC的紧耦合 发送消息fire-and-for ...

  6. linux单网卡多IP配置

    一.仅一个网卡的情况下,可以让该机器可以通过多个IP被访问,或隐藏常用IP,让他人访问其临时IP. 1.如果临时性的增加一个IP(重启机器或network服务后,丢失),可以使用ifconfig命令 ...

  7. VPS服务商

    1.vpsee http://www.vpsee.com 2.vps侦探 http://www.vpser.net/

  8. 如何使用DOS命令(cd命令)

    如何使用DOS命令 DOS是Disk Operation System(磁盘操作系统)的简称,是个人计算机上的一类操作系统.它直接操纵管理硬盘的文件,一般都是黑底白色文字的界面.顾名思义,DOS主要是 ...

  9. Jmeter插件监控服务器性能

    处理利用jmeter实施监控压测时受压机的各项性能 操作步骤: 施压机上的jmeter/lib/ext中放入下载的插件包 jmeter-plugins-perfmon-2.1.jar 受压机上放入Se ...

  10. centos 单独安装apachebench

    这两天在测试php性能优化方法. 为了做压力测试可观察效果,就选择了ApacheBench来作为压力测试工具.其实就是大家常说的ab. 但是这个工具是安装apache web server的时候自带的 ...