如何使用 jQuery 从多个集合选择中提取 id？

Posted 2023-05-09

【中文标题】如何使用 jQuery 从多个集合选择中提取 id？

【英文标题】：How can I use jQuery to pull the ids from a multiple collection select?

【发布时间】：2020-08-11 15:35:58

【问题描述】：

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

<%= 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”

【问题讨论】：

grab_event 是一个数组，你可以循环它或者做类似的事情：.html(grab_events.map(i => $(`<div>$i</div>`)))

谢谢。我已经更新了问题以澄清 - 集合中突出显示的事件的所有 id 都作为一个长字符串出现。我不知道如何分解它们。

啊，好酷。我想稍后在表单中使用 id 作为某些字段的参数。

我正在研究一个非常复杂的公式来从返回的数字字符串创建一个数组，哈哈。我很感激

【参考方案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>