Как я могу использовать jQuery, чтобы получить идентификаторы из выбора нескольких коллекций? - PullRequest
Новая
       58

Как я могу использовать jQuery, чтобы получить идентификаторы из выбора нескольких коллекций?

0 голосов
/ 28 апреля 2020

Я - любитель моего первого проекта. Если у меня есть коллекция простых форм: 

<%= 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 из выбранных событий, чтобы я мог динамически обновлять остальную часть следующей формы с помощью отдельных идентификаторов? В настоящее время, если я получу значение коллекции, все идентификаторы будут объединены в одну длинную строку. Я не знаю, как их разбить и сохранить.

Например, у меня есть: 

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

</script>

Но это просто бесполезно показывает строку всех идентификаторов. Идентификаторы 43, 65, 32 и 8 выходят как «4365328»

1 Ответ

1 голос
/ 28 апреля 2020

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>
...