jQuery MultiSelect 插件 SumoSelect 未绑定到单个页面上的多个实例

Question

我正在遍历一个对象，对于循环中的每个实例，我想提供一个多 select 下拉列表（使用 jQuery 插件 SumoSelect）。然而，现在，SumoSelect 似乎只绑定到循环中的第一个 multiselect 下拉列表，之后没有任何下拉列表。循环中的每个下拉菜单如何具有 SumoSelect 效果？（在 Github 上有一个未解决的问题）

查看控制台，我看到第一个下拉菜单已附加：div class="SumoSelect" tabindex="0">，但这不适用于其他示例。

我已经尝试了几个不同的选项并查看了源代码（并在谷歌上搜索了一堆），但不清楚我需要做些什么不同的事情。

这是一个简化的例子。假设我有一个 class "post" 可以有很多 "authors"。在我显示 "posts" 的页面上，我想遍历 posts，并且对于每个 post，给用户一个 multiselect 下拉列表以供选择作者添加到 post。现在，循环中第一个 post 的作者下拉菜单具有正确的 SumoSelect 效果，但之后的任何 posts 都没有 SumoSelect：

posts/view.html.erb（此下拉列表为 post 和作者创建了一个连接 table 条目——执行此操作的控制器代码工作正常，问题是在循环中第一次下拉后仅绑定 SumoSelect):

<% @posts.each do |post| %>
....
<select id="author-choice" name="author_ids[]"  multiple="true">
  <% Author.all.each do |author| %>
     <option value="<%= author.id%>",<%= author.name %></option>
  <% end %>
</select> ...

在我的 javascript 中，我有：

$(document).ready(function (){ 
  $('#author-choice').SumoSelect();
});

Answer 1

您的问题是每个下拉菜单都有相同的 ID，而 ID 应该是唯一的。更改 select 元素，使 author-choice 为 class (class='author-choice')，并将 jQuery select 或更改为 $('.author-choice')。如果仍然不能解决问题，那现在是 SumoSelect 的错，你必须用迭代器将应用 SumoSelect 的行换行：

$('.author-choice').each(function() {
    $(this).SumoSelect();
});

jQuery MultiSelect 插件 SumoSelect 未绑定到单个页面上的多个实例

jQuery MultiSelect Plugin SumoSelect not binding to multiple instances on single page

javascript

jquery

ruby-on-rails

multi-select

sumoselect.js