不显示弹出值？如何解决？

Question

我在 asp.net 核心工作。我正在使用打字稿。我正在使用 select2 选项。但是不显示值，即）不显示弹出窗口。

HTML:-

 <select class="js-example-basic-multiple js-states form-control select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NM">New Mexico</option>
                <option value="ND">North Dakota</option>
                <option value="UT">Utah</option>
                <option value="WY">Wyoming</option>
            </optgroup>
        </select>
        <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 100%;">
        <span class="selection">
            <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
            <ul class="select2-selection__rendered"><li class="select2-search select2-search--inline">
                <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span>
        <span class="dropdown-wrapper" aria-hidden="true"></span></span>

脚本：-

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script> 

风格：

 <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 的示例（完整代码）？

Answer 1

如何使这个例子工作：

1. 你不需要使用

   <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 100%;"> ... </span>

因为它将由select2() 自动生成。

1. 您应该将select2 放入$(document).ready 中，如下所示

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

你可以在这里看到working JsFiddle。还在 ASP.NET Core 项目中对其进行了测试，它也可以正常工作。

您还可以使用select2 的有用属性，如下所示：

$(document).ready(function () {
    $(".js-example-basic-multiple").select2(
        {
            width: "300px", //can set width with this parameter
            maximumSelectionLength: 3, //can selet maximum 3 items
            placeholder: "Select the state"
        }
    );
});