Select2, with rails and nested forms

问题

I having some troubles with select2. I am trying to implement a search function on a collection select.

(lazily translated)

View:

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

The issue i am having is, the first collection select is working as expected. But when i click the button "Add another item" the controller make another .build so the user get a oportunity to add a new item. However the second collecion_select DOES NOT have the "id: "select_search" set for some reason, as can be seen on the html sendt to the browser:

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>

Anyone has any idea of how to fix this?

回答1:

You are using the id to attach the select2 to your list, so it will only work on one of them. Use a class instead:

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

Then:

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

来源：https://stackoverflow.com/questions/32235724/select2-with-rails-and-nested-forms