Select2，带有导轨和嵌套表单

Question

我在使用 select2 时遇到了一些问题。 我正在尝试在集合选择上实现搜索功能。

（懒惰翻译）

查看：

  <%= 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(); });

我遇到的问题是，第一个集合选择按预期工作。但是，当我单击“添加另一个项目”按钮时，控制器会制作另一个 .build，以便用户有机会添加一个新项目。然而，第二个collecion_select 由于某种原因没有设置"id: "select_search"，这可以在发送到浏览器的html 中看到：

大白菜

    <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(); });