使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）即可解决问题！