select下拉框插件jquery.editable-select詳解
項目中有個需求,下拉框既可以下拉選擇,也可以手動填寫
html代碼
<span>數(shù)據(jù)來源</span> <select class="source"> <option value="0">人工導(dǎo)入</option> <option value="1">數(shù)據(jù)服務(wù)平臺</option> </select>
js代碼
$('#noMean').editableSelect({ filter:false, effects: 'fade', duration: 200, onCreate:function () { console.log("下拉框創(chuàng)建") }, onShow:function () { console.log("下拉框顯示") }, onHide:function () { console.log("下拉框隱藏") }, onSelect:function () { console.log("下拉框選項被選中") } }
獲取值
$(".noMean").val()
用了這個插件以后,這塊是一個input,type="text"
參數(shù)
filter 選擇option以后,是否過濾 默認(rèn) true
effects 點擊的時候,下拉框的過渡效果 有default,slide,fade三個值,默認(rèn)是default
duration 過渡效果時間 默認(rèn)是fast 值可以是fast和slow,也可以是數(shù)字
appendTo 下拉框如果彈出框效果,這個值才會用到,顯示把它加載到哪里
trigger 下拉框列表如何觸發(fā) 值是"focus", "manual" 默認(rèn)是focus
方法
onCreate:當(dāng)editableSelect方法生效時觸發(fā)。
onShow:當(dāng)下拉框出現(xiàn)時觸發(fā)。
onHide:當(dāng)下拉框隱藏時觸發(fā)。
onSelect:當(dāng)下拉框中的選項被選中時觸發(fā)。
參考地址:
https://www.npmjs.com/package/jquery-editable-select npm安裝
http://indrimuska.github.io/jquery-editable-select/ demo地址
https://github.com/zhaobao1830/jquery-editable-select 下載地址
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
element?table?點擊某一行中按鈕加載功能實現(xiàn)
在Element UI中,實現(xiàn)表格(element-table)中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06如何用JavaScript動態(tài)呼叫函數(shù)(兩種方式)
下面介紹一下動態(tài)呼叫函數(shù)目前應(yīng)該有下面兩種方式,它們之間的使用及對比,感興趣的朋友可以研究下,希望可以幫助到你2013-05-05js+html5實現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07javascript動態(tài)創(chuàng)建及刪除元素的方法
這篇文章主要介紹了javascript動態(tài)創(chuàng)建及刪除元素的方法,涉及針對DOM元素操作的技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12