JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<h1>
  select2 最新
</h1>

<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>

<select class="form-control" id="customer" name="customer">
  <option value selected></option>
</select>

<p></p>

<select class="form-control" id="iso_code" name="iso_code">
</select>

<p></p>

<input type="button" id="button" value="clear iso_code">
<input type="button" id="button2" value="set iso_code">

JavaScript

var result = null;
$.ajax({
  url: "http://192.168.88.18:5010/erp/get/copma/MA01",
  type: 'get',
  dataType: 'json',
  async: false,
  success: function(data) {
    result = $.map(data, function(obj) {
      obj.id = obj.id || obj.MA003;
      obj.text = obj.text || obj.MA003;
      return obj;
    });
    $("#customer").select2({
      placeholder: '請選擇',
      data: result,
    });
    console.log(result)
  }
});

$("#button").click(function() {
	console.log(typeof($("#iso_code").val()))
	console.log($("#iso_code").val())
  $('#iso_code').val("").trigger('change');
  console.log($("#iso_code").val())
});

$("#button2").click(function() {
	console.log($("#iso_code").val())
/*   a = []
  a.push("MA01      ")
  a.push("MS01      ") */
  a="MA01      ,MS01      "
  a=a.split(',')
  console.log(typeof(a))
  $('#iso_code').val(a).trigger('change');
  console.log($("#iso_code").val())
});

$("#iso_code").select2({
  placeholder: '請選擇',
  minimumInputLength: 0, // 最少字元才觸發尋找, 0 不指定
  tags: false,
  multiple: true,
  data: result,
});

$( document ).ready(function() {

});