Select2 多选奇怪叠加

Question

最初加载页面时，看不到占位符，并且右下角有一个奇怪的圆圈（我认为它与 Select2 中的搜索功能有关）覆盖占位符。

然后，当从 Select2 下拉列表中选择一个选项时，该选项会显示出来，但由于该圆圈覆盖，整个区域会被向下推。

如果我清除选择，占位符会出现，但圆圈仍然存在。

我的应用程序使用 Backbone 和 Marionette

这是我在 .js 文件中使用的代码（我使用过 minimumResultsForSearch 选项，但运气不佳）。

this.$el.find("#categorySelect").select2({
    multiple: true,
    allowClear: true,
    minimumResultsForSearch: -1,
    placeholder: "Categories"
})

这是我在 .tpl 文件中使用的代码

<select id="categorySelect" name="Categories" multiple="multiple" class="form-control" style="width: 100%;">
    <% for(category in categories){ %>
        <option value="<%=categories[category].title%>"
        <% if (categories[category].active == true) { %>
            selected
        <%}%>
        >
        <%=categories[category].title%></option>
    <% }; %>
</select>

Answer 1

您的脚本顺序不正确，使用前需要加载jQuery。

您还尝试在尚不存在的元素上初始化 select2，即在实际渲染视图之前。

还有一些没有任何意义的东西，比如

this.$el.html(_.extend(this.template(modelJSON))); 为什么要尝试扩展 HTML 字符串？

或

$(function(select2) {
   App.start(select2);
});

什么是将select2 作为第一个参数传递给 jQuery 就绪事件处理程序？

请尝试理解您正在编写的代码，以及您编写它的原因。

解决所有此类问题会得到类似http://jsfiddle.net/az5dksyz/2/。

此外，最好不要在模板字符串中使用id，因为它们可能会被多次渲染，并且不要在其中使用内联样式规则。