如何使用 jQuery 从多个集合 select 中提取 ID？

Question

我是第一个项目的爱好者。如果我有这个简单形式的集合：

<%= f.input :events, collection: @organizer.events.order(:start_time).reverse, label_method: :event_name_and_date, input_html: {multiple: true, id: "event_select"} %>

如何从所选事件中提取 event.id，以便我可以使用个人 ID 动态更新后续表单的其余部分？目前，如果我获取集合的值，所有的 id 都会组合在一个长字符串中。我不知道如何分解和存储它们。

例如，我有：

<script type="text/javascript">
  $(document).ready(function() {
    $('#event_select').on('change', function(){
        var grab_events = $('#event_select').val();
        $('#show_events').html(grab_events);    
    })
  });

</script>

但这只是显示了所有 ID 的字符串，毫无用处。 ID 43、65、32 和 8 显示为“4365328”

Answer 1

grab_events 是一个数组。当使用 .html() 时，jQuery 通过循环单独插入每个元素，而不调用 toString()。因为换行符不相关，所以看起来像一个长字符串。一种解决方案是手动调用 toString()，或将项目包装在块元素中。

当然，作为一个数组，你以后可以用它做任何你想做的事。

$('#event_select').on('change', function() {
  var grab_events = $('#event_select').val();

  // Inserting array, resulting in one long string
  $('#show_events').html(grab_events);
  // Separate with commas
  $('#show_events2').html(grab_events.toString());
  // Create a div for each element
  $('#show_events3').html(grab_events.map(i => $(`<div>${i}</div>`)));

  grab_events.forEach(i => {
    // Whatever you want to do
  });
})

#show_events {
  background-color: red;
}

#show_events2 {
  background-color: green;
}

#show_events3 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="event_select" multiple="multiple">
  <option value="11">item 1</option>
  <option value="24">item 2</option>
  <option value="43">item 3</option>
  <option value="4">item 4</option>
  <option value="35">item 5</option>
  <option value="16">item 6</option>
</select>
<div id="show_events"></div>
<div id="show_events2"></div>
<div id="show_events3"></div>

如何使用 jQuery 从多个集合 select 中提取 ID？

How can I use jQuery to pull the ids from a multiple collection select?

collections

jquery

ruby-on-rails

simple-form