簡(jiǎn)單介紹
jquery.sumoselect是一款跨設(shè)備、跨瀏覽器的jQuery下拉列表框插件。該jQuery下拉列表框插件可以單選,也可以多選。它的樣式可以通過(guò)CSS文件來(lái)自定義。它的最大特點(diǎn)是可以跨設(shè)備使用,所有設(shè)備上功能都是一致的。
該jQuery下拉列表框插件的特點(diǎn)有:
該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)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注