javascript - Bisakah kita menggunakan select2 di dalam dialog?

Saya sedang bekerja di asp.net core. Saya menggunakan typescript. Saya menggunakan select2.

HTML:-

<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>

Skrip:-

<script>
    $(document).ready(function () {
        $(".js-example-basic-multiple").select2();
    });
</script>

css dan js:-

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Ini adalah kode saya untuk select2. Saya menggunakan select2 di dalam dialog modal. Saat menggunakan select2 di dalam dialog, itu tidak berfungsi.

Saya memeriksa seperti menggunakan select2 di luar dialog modal, itu bekerja dengan baik.

Apakah kita bisa menggunakan select2 di dalam dialog modal? Jika ya, bagaimana caranya?

Versi select2: 4.0.3

Jawaban #1

Ini juga bekerja dengan baik di dalam modal. (periksa cuplikan)

$(document).ready(function() {
  $(".js-example-basic-multiple").select2();

  $("#dialog").dialog();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="dialog" title="Basic dialog">
  <select multiple id="e1" class="js-example-basic-multiple js-states form-control">
 
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
  </select>
</div>