javascript - Možemo li koristiti select2 unutar dijaloga?

Radim u ASP.NET Core. Koristim TypeScript. Koristim 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>

Skript:-

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

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

Ovo je moj kod za select2. Koristim select2 unutar modalnog dijaloga. Kada koristim select2 unutar dijaloga, ne radi.

Provjeravam korištenje select2 izvan modalnog dijaloga, radi dobro.

Možemo li koristiti select2 unutar modalnog dijaloga? Ako da, kako?

Verzija select2: 4.0.3

Odgovor #1

Također funkcionira dobro unutar modala. (pogledaj isječak)

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