javascript - ダイアログ内でselect2を使うことはできますか？

私はASP.NET Coreで作業しています。私はTypeScriptを使用しています。私は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>

スクリプト:-

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

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

これは私のselect2のコードです。モーダルダイアログ内でselect2を使用しています。ダイアログ内でselect2を使用すると、動作しません。

モーダルダイアログの外でselect2を使うのを確認しましたが、問題なく動作します。

モーダルダイアログ内でselect2を使用することはできますか？もしできる場合、どのように使いますか？

select2 のバージョン: 4.0.3

回答 #1

モーダル内でも問題なく動作します。（スニペットを確認してください）

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