jquery.sumoselect是一款跨裝置、跨瀏覽器的jQuery下拉列錶框外掛程式。此jQuery下拉列錶框外掛可以單選,也可以多選。它的樣式可以透過CSS檔案來自訂。它的最大特點是可以跨裝置使用,所有裝置上功能都是一致的。本文就和大家詳細解說jQuery基於Sumoselect外掛實現下拉複選框效果,希望能幫助大家。
此jQuery下拉列錶框外掛的特點有:
可以進行單選,也可以進行多重選擇。
可以透過CSS檔案來自訂樣式。
支援絕大多數的裝置。
根據裝置智慧渲染。
在Android、IOS、Windows和其它裝置上會自動渲染出該裝置原生樣式的下拉列錶框。
可以自訂提交資料的格式(多選可以透過 csv 或預設形式來提交)。
支援Selected、Disabled和占位文字。
易擴展,開發者可以輕鬆的創建新的元件。
使用基本方法間隙管理如新增選項、刪除選項、停用、選擇等。
該jQuery下拉列錶框外掛程式需要使用jQuery 1.8.3+版本,建議使用最新版本的jQuery。
1、官方網站:
https://hemantnegi.github.io/jquery.sumoselect/ 說明介紹網址
https://hemantnegi.github.io/jquery.sumoselect /sumoselect_demo.html demo網址
2、實作效果
3、程式碼demo
##首先引入js與css檔案
<link href="css/sumoselect.css" rel="external nofollow" rel="stylesheet"> <script src="vendor/jquery.sumoselect.js"></script>
<select multiple="multiple" placeholder="咨询,建议" class="SlectBox" id="SlectBox" required style="width: 160px"></select>
$('.SlectBox').SumoSelect({ csvDispCount: 3, captionFormat: '已选择:{0}(个)', selectAll:true, captionFormatAllSelected: "全选", okCancelInMulti: true, locale : ['确定', '取消', ''] });
//重新加载select标签中的数据 $('#SlectBox')[0].sumo.reload();
#bootstrap可編輯下拉框jquery.editable-select的寫法#
以上是詳解jQuery基於Sumoselect外掛程式實現下拉複選框效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!