选择2多选奇怪覆盖

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 ready事件处理程序？

请尝试了解您正在编写的代码，以及您为什么要编写代码。

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

在模板字符串中不使用id也是一个好主意，因为它们可以多次呈现，并且不会在其中使用内联样式规则。