Multiselect in rails

Question

I'm trying to use bootstrap multiselect in my rails app.

In the view where I'm using it I initialize the plugin with

<script type="text/javascript">
  $(document).ready(function() {
    $('.multiselect').multiselect();
  });
</script>

And it seems to work using the demo html:

<select class="multiselect" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

This is great but I can't get it to work with my rails select code. Here is my attempt:

<%= f.fields_for :sizes do |size_fields| %>
      <%= size_fields.label :scale_id, simple_pluralize(@miniset.scales.count, 'Scale') %>
      <%= hidden_field "Set Scale", @miniset.sizes %>
      <div class = "form-inline"><%= size_fields.select :scale_id, options_from_collection_for_select(Scale.all, :id, :name, @miniset.scales.map(&:id)), {include_blank: '', :class => 'multiselect', :multiple => true} %>
<% end %></div>

I assume the problem is that :class => 'multiselect', :multiple => true doesn't call the JQuery in the same way that <select class="multiselect" multiple="multiple"> does but I imagine there must be a way to make this work. Any help much much appreciated.

EDIT: I should add that my select IS showing up, it just isn't appearing as one of the intended smart multiselects as seen here.

EDIT 2: The code for that select that the browser shows is:

<label for="miniset_sizes_attributes_0_scale_id">Scales</label>
      <input id="Set_Scale_#&lt;ActiveRecord::Associations::CollectionProxy::ActiveRecord_Associations_CollectionProxy_Size:0x007fcf644c0c08&gt;" name="Set Scale[#&lt;ActiveRecord::Associations::CollectionProxy::ActiveRecord_Associations_CollectionProxy_Size:0x007fcf644c0c08&gt;]" type="hidden" />
      <div class = "form-inline"><select id="miniset_sizes_attributes_0_scale_id" name="miniset[sizes_attributes][0][scale_id]"><option value=""></option>
<option value="1">28mm</option>
<option value="2">54mm</option>
<option value="3">6mm</option>
<option value="4">15mm</option>
<option value="5">1/76</option></select>
      </div>

No sign of multiselect or multiple there. Hmm.

Answer 1

Your select field options are being generated by this:

options_from_collection_for_select(Scale.all, :id, :name, {:selected => @miniset.scales.map(&:id)})

The selected values (id's in your case) are not supposed to be passed as a hash, but rather as an array:

options_from_collection_for_select(Scale.all, :id, :name, @miniset.scales.map(&:id))

In addition, you are passing the class and multiple attributes as part of the select options - but these aren't supported options, and the missing class is causing the jquery selector not to find your select field. What you want is to pass them as standard HTML options, which requires a second hash. Here's the complete select builder that you should use:

size_fields.select :scale_id, 
                   options_from_collection_for_select(Scale.all, :id, :name, @miniset.scales.map(&:id)), 
                   {include_blank: ''}, 
                   {class: 'multiselect', multiple: true}