您好,登錄后才能下訂單哦!
這篇文章主要介紹了jQuery.Sumoselect插件如何實(shí)現(xiàn)下拉復(fù)選框效果,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
簡(jiǎn)單介紹
jquery.sumoselect是一款跨設(shè)備、跨瀏覽器的jQuery下拉列表框插件。該jQuery下拉列表框插件可以單選,也可以多選。它的樣式可以通過CSS文件來自定義。它的最大特點(diǎn)是可以跨設(shè)備使用,所有設(shè)備上功能都是一致的。
該jQuery下拉列表框插件的特點(diǎn)有:
可以進(jìn)行單選,也可以進(jìn)行多選。
可以通過CSS文件來自定義樣式。
支持絕大多數(shù)的設(shè)備。
根據(jù)設(shè)備智能渲染。
在Android、IOS、Windows和其它設(shè)備上會(huì)自動(dòng)渲染出該設(shè)備原生樣式的下拉列表框。
可以自定義提交數(shù)據(jù)的格式(多選可以通過 csv 或默認(rèn)形式來提交)。
支持Selected、Disabled和占位文本。
易擴(kuò)展,開發(fā)者可以很容易的創(chuàng)建新的組件。
使用基本方法間隙管理如添加選項(xiàng)、刪除選項(xiàng)、禁用、選擇等。
該jQuery下拉列表框插件需要使用jQuery 1.8.3+版本,建議使用最新版本的jQuery。
1、官方網(wǎng)站:
https://hemantnegi.github.io/jquery.sumoselect/ 說明介紹網(wǎng)址
https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html demo網(wǎng)址
2、實(shí)現(xiàn)效果
3、代碼demo
首先引入js與css文件
<link href="css/sumoselect.css" rel="external nofollow" rel="stylesheet"> <script src="vendor/jquery.sumoselect.js"></script>
然后在html里面添加select標(biāo)簽:
<select multiple="multiple" placeholder="咨詢,建議" class="SlectBox" id="SlectBox" required ></select>
最后在js代碼中添加代碼:
$('.SlectBox').SumoSelect({ csvDispCount: 3, captionFormat: '已選擇:{0}(個(gè))', selectAll:true, captionFormatAllSelected: "全選", okCancelInMulti: true, locale : ['確定', '取消', ''] });
注意:官網(wǎng)中有許多的屬性,同時(shí)還能在select下拉框中綁定許多的事件:
當(dāng)我們想要下拉框二級(jí)聯(lián)動(dòng)的時(shí)候,通過下面的事件,刷新select標(biāo)簽中的內(nèi)容實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)。
//重新加載select標(biāo)簽中的數(shù)據(jù) $('#SlectBox')[0].sumo.reload();
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jQuery.Sumoselect插件如何實(shí)現(xiàn)下拉復(fù)選框效果”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。