JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css"
  rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

        <div class="form-group row">
          <label class="col-sm-2 col-form-label">select2 設定值</label>
          <div class="col-sm-5">
            <select class="form-control" id="i181" placeholder="">
              <option value="" selected></option>
            </select>
          </div>
        </div>

<input type="button" class="btn btn-primary" id="btn_insert" value="test">

JavaScript

$("#i181").select2({
      placeholder: '請選擇',
      width: '100%',
      data: [{ "text": "Taiwan, Chinese", "id": "zh-tw" }, { "text": "Hong Kong, Chinese", "id": "zh-hk" }, { "text": "China, Chinese", "id": "zh-cn" }, { "text": "Canada, English", "id": "en-ca" }, { "text": "United Kingdom, English", "id": "en-gb" }, { "text": "United States, English", "id": "en-us" }, { "text": "Canada, French", "id": "fr-ca" }, { "text": "France, French", "id": "fr-fr" }, { "text": "Austria, German", "id": "de-at" }, { "text": "Germany, German", "id": "de-de" }, { "text": "Italy, Italian", "id": "it-it" }, { "text": "Japan, Japanese", "id": "ja-jp" }, { "text": "South Korea, Korean", "id": "ko-kr" }, { "text": "Romania, Romanian", "id": "ro-ro" }, { "text": "Serbia, Serbian", "id": "sr-rs" }, { "text": "Spain, Spanish", "id": "es-es" }, { "text": "Mexico, Spanish", "id": "es-mx" }, { "text": "Peru, Spanish", "id": "es-pe" }]
    })


$("#btn_insert").click(function () {
	/* $("#i181").select2().val("zh-tw").trigger("change") */
  $("#i181").val("zh-tw")
  $("#i181").trigger("change")
})