使select文本框可编辑可选择(jQuery插件)
前几天一个哥们使用之后,怎么都改不成可选择可编辑的状态,我远程后调试后发现, 是因为和其他引入的包冲突。
在这里给大家提供个比较难发现的问题。。
最近做项目中用到了这个插件,正好分享下。
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插件)的更多相关文章
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...
- 使input文本框不可编辑的3种方法
一:disabled disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字的颜色会变成灰色.d ...
- HTML:<input type="text">文本框不可编辑的方式
1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...
- 实现表单input文本框不可编辑的三种方法
感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...
- 使input文本框随其中内容而变化长度的方法
最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
- 获取select文本框的下拉菜单文字内容的两种方式
<body> <div class="box"> <select id="sel"> <option value=&q ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何让文本框可以输入,文本框可以编辑
选中一个文本框,然后在属性中双击输入配置的OnMouseDown事件(也可以是别的事件,但都是通过这种方法) 在左侧点击写变量,然后输入类型改成VisuDialos.Numpad(数字键盘方式), ...
- MFC入门示例之静态文本框、编辑框
点击按钮计算文本框中文本长度 void CMFCApplication1Dlg::OnBnClickedButton1() { CString strInput; GetDlgItemText(IDC ...
- 自己编写的仿京东移动端的省市联动选择JQuery插件
概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
随机推荐
- [LeetCode] Roman to Integer 罗马数字转化成整数
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
- [Java]使用HttpClient实现一个简单爬虫,抓取煎蛋妹子图
第一篇文章,就从一个简单爬虫开始吧. 这只虫子的功能很简单,抓取到”煎蛋网xxoo”网页(http://jandan.net/ooxx/page-1537),解析出其中的妹子图,保存至本地. 先放结果 ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- java面向对象---成员变量和成员函数
//成员变量 1.类定义了对象中所具有的变量,这些变量称作成员变量 2.每个对象都有自己的变量,和同一个类的其他对象的分开的 //函数与成员变量 1.在函数中可以直接写成员变量的名字来访问成员变量,那 ...
- 疯狂JAVA16课之对象与内存控制
java内存管理分为两个方面:内存分配和内存回收.这里的内存分配特指创建java对象时JVM为该对象在对内存中所分配的内存空间.内存回收指的是当该java对象失去引用,变成垃圾时,JVM的垃圾回收机制 ...
- Nginx编译安装(Centos)
前言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大 ...
- v-for遍历出的元素上添加click事件,获取对应元素上的属性id值
<span v-for="(n,nav) in floorList" data-id="{{nav.itemId}}" v-on:click=" ...
- SQLServer------将表和内容导入到另一个数据库
转载: http://jingyan.baidu.com/article/d5c4b52bc5c102da570dc547.html
- Oracle 的字符集与乱码
字符集问题一直叫人头疼,究其原因还是不能完全明白其运作原理. 在整个运行环节中,字符集在3个环节中发挥作用: 1.软件在操作系统上运作时的对用户的显示,此时采用操作系统定义的字符集进行显示.我们在系统 ...
- the import android cannot be resolved
1.先更新SDK 2.从Window选择SDK并且Apply 3.从Project选择Android的版本