【问题标题】:Can we use select2 inside the dialog?我们可以在对话框中使用 select2 吗?
【发布时间】:2018-01-30 13:39:01
【问题描述】:

我在 asp.net 核心工作。我正在使用打字稿。我正在使用 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

【问题讨论】:

  • 你需要初始化select2()之后模态已经显示。为此,您可以挂钩到您使用的任何模态库中的事件。

标签: javascript jquery typescript jquery-select2


【解决方案1】:

它在模态中也可以正常工作。 (检查sn-p)

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-30
    • 1970-01-01
    相关资源
    最近更新 更多