inserting select2's multiple select into rails' form_for

Question

I am using select2-rails gem and would like to get select2 to work on my multiple select field for artist_ids like it does in this all-js example. Here is what my erb file looks like now. Addition of the js script did not produce any effect, the form still loads the same way.

<%= form_for @event, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>
  <%= f.text_field :name %><br />
  <%= f.datetime_select :date %><br />
  <%= f.text_area :description, size: "60x12" %><br />
  <%= f.select(
    :venue_id,
    options_from_collection_for_select(Venue.all, "id", "name")
  ) %>
  <%= f.collection_select :artist_ids, Artist.all, :id, :name, {:selected => @event.artist_ids, include_blank: true}, {multiple: true} %>
  <br />
  <%= f.submit "Create" %><br />

    <% content_for :js do %>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#event_artist_ids').select2();
    });
    </script>
    <% end %>
<% end %>

I followed all the usual procedures for adding select2 as instructed in the docs. Added //= require select2 line in application.js and *= require select2 with *= require select2-bootstrap to application.scss.

UPDATE:

after Prashant Ravi Darshan suggestion, it looks like select2 has started working, though with bugs. now it's two messy fields for selecting an Artist

Answer 1

Please try this

<%= f.select(:artist_ids, Artist.all.collect {|a| [a.name, a.id]}, {}, id: "event_artist_ids", :multiple => true) %>

<script type="text/javascript">
    $( "#event_artist_ids" ).select2();
</script>