我如何使用jQuery从多个集合选择中提取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>