快捷導(dǎo)航

select下拉框插件jquery.editable-select詳解

更新時(shí)間：2017年01月22日 10:58:18 作者：zhaobao1830

本篇文章主要介紹了select下拉框插件jquery.editable-select。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

項(xiàng)目中有個(gè)需求，下拉框既可以下拉選擇，也可以手動(dòng)填寫

html代碼

 <span>數(shù)據(jù)來源</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以后，是否過濾默認(rèn) true

effects 點(diǎn)擊的時(shí)候，下拉框的過渡效果有default，slide，fade三個(gè)值，默認(rèn)是default

duration 過渡效果時(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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS組件系列之JS組件封裝過程詳解
JS組件的擴(kuò)展和封裝，我們來感受下JQuery為我們提供$.Extend的神奇，接下來通過本文給大家分享JS組件系列之JS組件封裝過程詳解，需要的朋友參考下吧
2017-04-04
JavaScript中的console.time()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.time()函數(shù)詳細(xì)介紹,console.time()函數(shù)主要用來統(tǒng)計(jì)程序執(zhí)行時(shí)間,需要的朋友可以參考下
2014-12-12
小程序canvas實(shí)現(xiàn)畫布半圓環(huán)
這篇文章主要為大家詳細(xì)介紹了小程序canvas實(shí)現(xiàn)畫布半圓環(huán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
Js實(shí)現(xiàn)累加上漂浮動(dòng)畫示例
這篇文章主要為大家介紹了Js實(shí)現(xiàn)累加上漂浮動(dòng)畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-02-02
webpack 3.X學(xué)習(xí)之多頁(yè)面打包的方法
這篇文章主要介紹了webpack 3.X學(xué)習(xí)之多頁(yè)面打包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
JavaScript獲取當(dāng)前時(shí)間向前推三個(gè)月的方法示例
這篇文章主要介紹了JavaScript獲取當(dāng)前時(shí)間向前推三個(gè)月的方法,結(jié)合實(shí)例形式分析了javascript日期與時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
JS取request值以及自動(dòng)執(zhí)行使用示例
在網(wǎng)頁(yè)中JS函數(shù)自動(dòng)執(zhí)行常用三種方法，下面為大家詳細(xì)介紹下JS取request值以及自動(dòng)執(zhí)行使用,需要的朋友可以參考下
2014-02-02
利用用JS實(shí)現(xiàn)一個(gè)實(shí)時(shí)小鬧鐘
天我們來聊聊如何使用JS來創(chuàng)建一個(gè)實(shí)時(shí)的小鬧鐘,這個(gè)小鬧鐘十分的有趣,小伙伴們可以運(yùn)行一下,看看跟你電腦上的時(shí)間是否對(duì)的上呢,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
js實(shí)現(xiàn)批量刪除功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)批量刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08