使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： [e-mail]