# 下拉選單前端套件

### sumoselect
[github](https://github.com/HemantNegi/jquery.sumoselect)

<link rel="stylesheet" href="../assets/vendor/sumoselect-v3.4.8/sumoselect.min.css">
<script src="../assets/vendor/sumoselect-v3.4.8/jquery.sumoselect.min.js"></script>

<select id="ddlCategory" class="sumoSelect" multiple></select>

<script>
    // 下拉複選
    $('.sumoSelect').SumoSelect({
        okCancelInMulti: true,
        selectAll: true,
        csvDispCount: 5,
        search: true,
        searchText: '搜尋',
        placeholder: '請選擇',
        locale: ['確定', '取消', '全選'],
        forceCustomRendering: true
    });
</script>

//console
$("#ddlCategory").val();
(2)['海空聯訓', '海軍遠海長航']


---

## bootstrap-select
[github](https://github.com/snapappointments/bootstrap-select/)

<link rel="stylesheet" href="css/bootstrap-select.min.css">
<script src="js/bootstrap-select.min.js"></script>

<select id="ddlCategory" multiple></select>

<script>
    // 下拉複選
    $("#ddlCategory").attr("data-actions-box", "true");   // 開啟全選/全取消的按鈕
    $("#ddlCategory").attr("data-live-search", "true");   // 開啟選項的搜尋框
    $("#ddlCategory").selectpicker({
        deselectAllText: "清除",
        selectAllText: "全選",
        noneSelectedText: "尚未選取"
    });
</script>

//console
$("#ddlCategory").val();
(2)['1', '2']