1.單選

<select class="js-select2-id1" style="width:100%;>
  <option>請選擇縣市</option>
  <option value="01">台北市</option>
  <option value="02">新北市</option>
  <!-- 注意：value一定要填值 -->  
  ...
</select>
---
$('.js-select2-id1').select2({
  language:{
    "noResults": function () {
      return "找不到結果";
    }
  }
});

/* 已被選取的項目 */
.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: #eee;
  color: #45beb2;
}
  /* hover中的項目 */
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  color: #fff;
  background-color: #45beb2;
}

2.單選 (有placeholder)

<select class="js-select2-id2" data-placeholder="請選縣市(可輸入文字)" style="width:100%;>
  <option></option> 單選+placeholder, 第一個option需為空值
  <option value="01">台北市</option>
...
</select
---
$('.js-select2-id2').select2({
  allowClear: true, //可清除
  language:{
    "noResults": function () {
    return "找不到結果";
    }
  }
});

3.多選

<select multiple="multiple" class="js-select2-id3" data-placeholder="請選縣市(可多選)" style="width:100%;>
  <option value="01">台北市</option> 
...
</select
---
$('.js-select2-id3').select2({
  allowClear: true, //可清除
  language:{
    "noResults": function () {
      return "找不到結果";
    }
  }
});

4.多選 (最多選 N 個)

<select multiple="multiple" class="js-select2-id4" data-placeholder="請選縣市(最多選3個)" style="width:100%;>
  <option value="01">台北市</option> 
...
</select
---
$('.js-select2-id4').select2({
  allowClear: true,
  maximumSelectionLength: 3,
  language: {
    "maximumSelected": function (args) {
      var message = '最多可選 ' + args.maximum + ' 個項目';
      return message;
    },
    "noResults": function () {
      return "找不到結果";
    }
  }  
});

5.多選 (選項中帶圖片格式)

<select multiple="multiple" class="js-select2-id5" data-placeholder="請選擇國家(可多選)" style="width:100%;>
  <optgroup label="Asia">
    <option value="tw">Taiwan</option>
    <option value="cn">China</option>
        ...
  </optgroup>
  ...
</select>
---
function formateCountry(country) {
  //country.id-->對應到option value，例如國名代號: tw, cn, hk,.....
  //country.text-->對應到option text，例如: Taiwan, China, Hong Kong,.....
  if (!country.id) {
    return country.text; 
  }
  var $country = $(
    "<img src='flags_blank.gif' class='s2-flag flag flag-" + country.id.toLowerCase() + "' /><span>" + country.text + "</span>"
  );
  //把html碼用$符號包成 html 物件
  //<img src='flags_blank.gif' class='s2-flag flag flag-tw' /><span>Taiwan</span>
  //<img src='flags_blank.gif' class='s2-flag flag flag-cn' /><span>China</span>
  return $country;
}  
$('.js-select2-id5').select2({
  templateSelection: formateCountry, //被選中的項目,改為指定的的html碼, 範例請參照 https://select2.org/selections#templating
  templateResult: formateCountry, //下拉選單的項目,改為指定的的html碼,範例請參照 https://select2.org/dropdown#templating
  allowClear: true,
  language: {
    "noResults": function () {
      return "找不到結果";
    }
  }
});

6.多選 (全選/全不選)

<input type="checkbox" id="js-id6-checkall" ><label for="js-id6-checkall" >選擇全部國家</label>
<select multiple="multiple" class="js-select2-id6" data-placeholder="請選縣市(最多選3個)" style="width:100%;>
  ...
</select
----      
$('.js-select2-id6').select2({
  ...
});
$('#js-id6-checkall').on('click', function () {
  if ($("#js-id6-checkall").is(':checked')) { //改為全選
    $(".js-select2-id6 option").prop("selected", "selected");
    $(".js-select2-id6").trigger("change");
  } else { //改為全不選
    $(".js-select2-id6 option").prop("selected", "");
    $(".js-select2-id6").trigger("change");
  }
});