select下拉框插件jquery.editable-select詳解
項(xiàng)目中有個(gè)需求,下拉框既可以下拉選擇,也可以手動(dòng)填寫(xiě)
html代碼
<span>數(shù)據(jù)來(lái)源</span> <select class="source"> <option value="0">人工導(dǎo)入</option> <option value="1">數(shù)據(jù)服務(wù)平臺(tái)</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("下拉框選項(xiàng)被選中") } }
獲取值
$(".noMean").val()
用了這個(gè)插件以后,這塊是一個(gè)input,type="text"
參數(shù)
filter 選擇option以后,是否過(guò)濾 默認(rèn) true
effects 點(diǎn)擊的時(shí)候,下拉框的過(guò)渡效果 有default,slide,fade三個(gè)值,默認(rèn)是default
duration 過(guò)渡效果時(shí)間 默認(rèn)是fast 值可以是fast和slow,也可以是數(shù)字
appendTo 下拉框如果彈出框效果,這個(gè)值才會(huì)用到,顯示把它加載到哪里
trigger 下拉框列表如何觸發(fā) 值是"focus", "manual" 默認(rèn)是focus
方法
onCreate:當(dāng)editableSelect方法生效時(shí)觸發(fā)。
onShow:當(dāng)下拉框出現(xiàn)時(shí)觸發(fā)。
onHide:當(dāng)下拉框隱藏時(shí)觸發(fā)。
onSelect:當(dāng)下拉框中的選項(xiàng)被選中時(shí)觸發(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 下載地址
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- bootstrap可編輯下拉框jquery.editable-select
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- 利用jquery獲取select下拉框的值
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- jQuery操作select下拉框的text值和value值的方法
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery操作選中select下拉框的值代碼實(shí)例
相關(guān)文章
測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比
這篇文章主要介紹了測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比,對(duì)性能感興趣的同學(xué),可以多實(shí)驗(yàn)一下2021-04-04javascript中2個(gè)感嘆號(hào)的用法實(shí)例詳解
這篇文章主要介紹了javascript中2個(gè)感嘆號(hào)的用法,并用大量的實(shí)例講述了!!的常見(jiàn)應(yīng)用情況,是非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09JS判斷網(wǎng)頁(yè)廣告是否被瀏覽器攔截過(guò)濾的代碼
這篇文章主要介紹了JS判斷網(wǎng)頁(yè)廣告是否被瀏覽器攔截過(guò)濾的代碼,需要的朋友可以參考下2015-04-04swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12element?table?點(diǎn)擊某一行中按鈕加載功能實(shí)現(xiàn)
在Element UI中,實(shí)現(xiàn)表格(element-table)中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點(diǎn)擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06如何用JavaScript動(dòng)態(tài)呼叫函數(shù)(兩種方式)
下面介紹一下動(dòng)態(tài)呼叫函數(shù)目前應(yīng)該有下面兩種方式,它們之間的使用及對(duì)比,感興趣的朋友可以研究下,希望可以幫助到你2013-05-05js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法,涉及針對(duì)DOM元素操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12