刷新页面时，Select2药盒的出库/加载问题

Question

我已经试图解决这一问题了一天，不确定是否可以隐藏它。这非常重要，因为每个访问我的网页的用户都会看到此信息（这是一个主要元素）。

这是我每次重新加载页面时所发生情况的GIF：

via Imgur

我要获取的只是此搜索栏，而没有在重新加载时出现上述渲染问题：

我正在使用：

• 具有Select2引导程序主题（0.1.0-beta.10）的Select2（4.0.6）
• 引导程序（4.1.3）
• jQuery（3.3.1）

这是我的进口货 （全部在标题中）：

Bootstrap / jQuery：

<link href="{% static 'web/bootstrap-4.1.3-dist/css/bootstrap-grid.min.css' %}" rel="stylesheet">
<link href="{% static 'web/bootstrap-4.1.3-dist/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'web/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'web/popper.js' %}"></script>
<script src="{% static 'web/bootstrap-4.1.3-dist/js/bootstrap.min.js' %}"></script>

Select2 / Select2 Bootstrap Theme（全部通过CDN导入，您认为这可能会导致加载时间更长吗？）：**

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet">`

这是Select2的jQuery / Javascript（由Select2提供）：

（此脚本在页面的最底部）

$('#search-bar').ready(function() {
    $.fn.select2.defaults.set("theme", "bootstrap" );
        $( ".js-multiple" ).select2({
            width: '47rem',
            placeholder: 'Filter by name',
    });
});

以下是搜索栏的HTML：

<form action="" method="GET" id="selection-form">
    {% csrf_token %}
    <div class="form-group d-flex justify-content-center gfeed">
        <label for="search-bar">Search</label>
        <select id="search-bar" class="form-control js-multiple" multiple="multiple">
            <option value="A">Alaska</option>
            <option value="NY">New York</option>
            <option value="O">Oslin</option>
            <option value="SEA">Seattle</option>
        </select>
    </div>
</form>