快捷導(dǎo)航

jQuery.Sumoselect插件實(shí)現(xiàn)下拉復(fù)選框效果

更新時(shí)間：2017年11月09日 09:46:07 作者：開(kāi)著小馬奔騰喲

jquery.sumoselect是一款跨設(shè)備、跨瀏覽器的jQuery下拉列表框插件。接下來(lái)通過(guò)本文給大家分享jQuery.Sumoselect插件實(shí)現(xiàn)下拉復(fù)選框效果，需要的朋友參考下吧

簡(jiǎn)單介紹

jquery.sumoselect是一款跨設(shè)備、跨瀏覽器的jQuery下拉列表框插件。該jQuery下拉列表框插件可以單選，也可以多選。它的樣式可以通過(guò)CSS文件來(lái)自定義。它的最大特點(diǎn)是可以跨設(shè)備使用，所有設(shè)備上功能都是一致的。

該jQuery下拉列表框插件的特點(diǎn)有：

可以進(jìn)行單選，也可以進(jìn)行多選。
可以通過(guò)CSS文件來(lái)自定義樣式。
支持絕大多數(shù)的設(shè)備。
根據(jù)設(shè)備智能渲染。
在Android、IOS、Windows和其它設(shè)備上會(huì)自動(dòng)渲染出該設(shè)備原生樣式的下拉列表框。
可以自定義提交數(shù)據(jù)的格式（多選可以通過(guò) csv 或默認(rèn)形式來(lái)提交）。
支持Selected、Disabled和占位文本。
易擴(kuò)展，開(kāi)發(fā)者可以很容易的創(chuàng)建新的組件。
使用基本方法間隙管理如添加選項(xiàng)、刪除選項(xiàng)、禁用、選擇等。

該jQuery下拉列表框插件需要使用jQuery 1.8.3+版本，建議使用最新版本的jQuery。

1、官方網(wǎng)站：

https://hemantnegi.github.io/jquery.sumoselect/ 說(shuō)明介紹網(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 style="width: 160px"></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í)候，通過(guò)下面的事件，刷新select標(biāo)簽中的內(nèi)容實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)。

//重新加載select標(biāo)簽中的數(shù)據(jù) 
$('#SlectBox')[0].sumo.reload();

總結(jié)

以上所述是小編給大家介紹的jQuery.Sumoselect插件實(shí)現(xiàn)下拉復(fù)選框效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: