Question

I have been playing around with the jQuery-ui Selectmenu, but haven’t been able to get it to work with the grouped_collection_select. The Selectmenu works with the basic select when I set the class to “selectmenu,” which I have set the jQuery-ui to look for. Basically, I’m struggling to add Class to grouped_collection_select.

I have tried:
<%= f.grouped_collection_select(:state_id, Country.order(:id), :categories, :name, :id, :name, {:include_blank=>true, :class=>"selectmenu"})%>

and
<%= f.grouped_collection_select(:state_id, Country.order(:id), :categories, :name, :id, :name, :class=>"selectmenu")%>

I was able to add the class using $(‘#user_state_id).addClass(‘selectmenu’) in my coffeescript. However, this seemed to cause my dynamic menu from being able to update the options for my State select menu.

Any thoughts on what I’m missing here? Is there a better way to set the class for grouped_collection_select. I’ve checked the source code and the class is not being added using :class=> in grouped_collection_select.

The selectmenu:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

Answer 1

grouped_collection_select takes nine arguments. If you are passing object in with the f it only takes eight arguments.

The last argument is html_options, where you need to place the class. This will get you the class on the select form field element but not optgroup or option elements.

<%= f.grouped_collection_select(:state_id, Country.order(:id), :categories, :name, :id, :name, { :include_blank => true }, { :class=> "selectmenu" }) %>

Without the :include_blank => true it would look like this:

<%= f.grouped_collection_select(:state_id, Country.order(:id), :categories, :name, :id, :name, {}, { :class=> "selectmenu" }) %>

Which should get you:

<select class="selectmenu" id="object_state_id" name="object[state_id]">...