Select2，具有 rails 和嵌套形式

Question

我在使用 select2 时遇到了一些问题。我正在尝试在集合 select.

上实现搜索功能

（懒惰翻译）

查看：

  <%= f.fields_for :baixa_itens do |baixa_item| %>
    <div>
      <%= baixa_item.label :item_id, "Item: " %>
      <%= baixa_item.collection_select(:item_id, @itens, :id, :to_s, {:prompt => "Select an item item" },  id: "select_search", style: 'width: 900px;') %><br>
      <%= baixa_item.label :ammount, "Ammount:" %>
      <%= baixa_item.number_field :ammount, :size => 4 %>
    </div>
  <% end %>
  <p>
    <%= f.submit 'Add another item', :name => "add_item" %>
  </p>

baixa.js:

$(document).ready(function() { $("#select_search").select2(); });

我遇到的问题是，第一个集合 select 正在按预期工作。但是，当我单击按钮 "Add another item" 时，控制器会生成另一个 .build，以便用户有机会添加新项目。然而，由于某些原因，第二个 collecion_select 没有设置 "id: "select_search"，正如在发送给浏览器的 html 中所见：

Itens da baixa

    <div>
      <label for="baixa_baixa_itens_attributes_0_item_id">Item: </label>
      **<div style="width: 900px;" id="s2id_select_search" class="select2-container"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span id="select2-chosen-1" class="select2-chosen">
        Nome: Lozeprel| Lote: Krr3234 </span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen1" class="select2-offscreen"></label><input id="s2id_autogen1" aria-labelledby="select2-chosen-1" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text"><div class="select2-drop select2-display-none select2-with-searchbox">   <div class="select2-search">       <label for="s2id_autogen1_search" class="select2-offscreen"></label>       <input placeholder="" id="s2id_autogen1_search" aria-owns="select2-results-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" type="text">   </div>   <ul id="select2-results-1" class="select2-results" role="listbox">   </ul></div></div><select title="" tabindex="-1" id="select_search" style="width: 900px; display: none;" name="baixa[baixa_itens_attributes][0][item_id]"><option selected="selected" value="11">Nome: Lozeprel| Lote: Krr3234 </option>**
        <option value="14">Nome: Lozepre| Lote: Lff2345 </option>
        <option value="8">Nome: Histamin| Lote: LO77563</option>
      <label for="baixa_baixa_itens_attributes_0_ammount">Ammount:</label>
      <input size="4" value="1" name="baixa[baixa_itens_attributes][0][ammount]" id="baixa_baixa_itens_attributes_0_ammount" type="number">
    </div>

    <div>
      <label for="baixa_baixa_itens_attributes_1_item_id">Item: </label>
      **<select id="select_search" style="width: 900px;" name="baixa[baixa_itens_attributes][1][item_id]">**
        <option value="11">Nome: Lozeprel| Lote: Krr3234</option>
        <option value="14">Nome: Lozeprel| Lote: Lff2345</option>
        <option selected="selected" value="15">Nome: Lozeprel Lote: U773123</option>
      <label for="baixa_baixa_itens_attributes_1_ammount">Ammount:</label>
      <input size="4" value="2" name="baixa[baixa_itens_attributes][1][ammount]" id="baixa_baixa_itens_attributes_1_ammount" type="number">
    </div>

    <div>
      <label for="baixa_baixa_itens_attributes_2_item_id">Item: </label>
      **<select id="select_search" style="width: 900px;" name="baixa[baixa_itens_attributes][2][item_id]">
        <option value="14">Nome: Lozeprel| Lote: Lff2345</option>
        <option value="15">Nome: Lozeprel| Lote: U773123</option>
        <option selected="selected" value="8">Nome: Histamin| Lote: LO77563</option>
      <label for="baixa_baixa_itens_attributes_2_ammount">Ammount:</label>
      <input size="4" value="2" name="baixa[baixa_itens_attributes][2][ammount]" id="baixa_baixa_itens_attributes_2_ammount" type="number">
    </div>

    <div>
      <label for="baixa_baixa_itens_attributes_3_item_id">Item: </label>
      **<select id="select_search" style="width: 900px;" name="baixa[baixa_itens_attributes][3][item_id]">
        <option value="">Select an iten</option>**
        <option value="11">Lozeprel| Lote: Krr3234 </option>
        <option value="14">Lozeprel| Lff2345| </option>
        <option value="15">Lozeprel| U773123| </option>
      <label for="baixa_baixa_itens_attributes_3_ammount">Ammount:</label>
      <input size="4" name="baixa[baixa_itens_attributes][3][ammount]" id="baixa_baixa_itens_attributes_3_ammount" type="number">
    </div>
  <hr size="1">

  <p>
    <input name="add_item" value="Adicionar novo item a baixa" type="submit">
  </p>

有人知道如何解决这个问题吗？

Answer 1

您正在使用 id 将 select2 附加到您的列表中，因此它只会对其中一个有效。使用 class 代替：

<%= baixa_item.collection_select(:item_id, @itens, :id, :to_s, 
  {:prompt => "Select an item item" }, class: "select_search", 
  style: 'width: 900px;') %>

然后：

$(document).ready(function() { $(".select_search").select2(); });

Select2，具有 rails 和嵌套形式

Select2, with rails and nested forms

javascript

ruby-on-rails

select2-rails

Itens da baixa