javascript - 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，即在实际渲染 View 之前。

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

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

或

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

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

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

修复所有此类问题会给出类似 http://jsfiddle.net/az5dksyz/2/ 的内容.

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