Select2，带有rails和嵌套表单

Question

我有一些问题选择。我正在尝试实现一个集合选择的搜索功能。

(懒洋洋地翻译)

视图:

  <%= 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，这样用户就有机会添加一个新项目。然而，由于某些原因，第二个collection_select没有"id: "select_search"设置，可以在发送到浏览器的html中看到:

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