跳轉到

Select2 套件筆記

官方網站

點我前往

官方說明文件

點我前往

官方使用範例

點我前往

使用筆記

引用方式

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
            integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

複選下拉式選框

HTML
<div class="input-group">
      <span class="input-group-addon" id="basic-addon3"><?=lang("查詢")?></span>
      <select class="search form-control" multiple="multiple">
          <option value="one">First</option>
          <option value="two" >Second (disabled)</option>
          <option value="three">Third</option>
      </select>
 </div>
jquery
$(function(){
        let $disabledResults = $(".search");
        $disabledResults.select2();
    });

清空已選擇的項目

$('.search').val(null).trigger('change');

清空現有所有項目

$('.search').html("").select2({
            placeholder: "<?=lang("請輸入商品名稱")?>",
            width:"35%",
        });

選擇項目事件(select)

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

取消選擇項目事件(unselect)

$('#mySelect2').on('select2:unselect', function (e) {
    var data = e.params.data;
    console.log(data);
});

使用AJAX產生option

HTML
<form method="post">
    <select class="user"></select>
</form>
javascript
$(function (){
    $(".user").select2({
        language: 'zh-TW',
        width: '100%',
        // 最多字元限制
        maximumInputLength: 10,
        // 最少字元才觸發尋找, 0 不指定
        minimumInputLength: 0,
        // 當找不到可以使用輸入的文字
        // tags: true,
        placeholder: '請輸入名稱...',
        // AJAX 相關操作
        ajax: {
            url: 'https://next.json-generator.com/api/json/get/E1SKlb7-r',
            type: 'get',
            // 要送出的資料
            data: function (params){
                // 在伺服器會得到一個 POST 'search' 
                return {
                    search: params.term 
                };
            },
            processResults: function (data, params){
                console.log(data)

                // 一定要返回 results 物件
                return {
                    results: data,
                    // 可以啟用無線捲軸做分頁
                    pagination: {
                        more: true
                    }
                }
            }
        }
    });
})

processResults 從伺服器取得的結果，因為 return.results 要產生

json
[
    { id: 1, text: "Blue" },
]

變更高度CSS

CSS
<style>
    .select2-selection__rendered {
        line-height: 28px !important;
    }
    .select2-container .select2-selection--single {
        height: 28px !important;
    }
    .select2-selection__arrow {
        height: 28px !important;
    }
</style>