最近做项目中用到了这个插件,正好分享下。
1. 需要用的js包点击下载,在项目中引入该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: [email protected]
时间: 2024-08-03 20:43:04