Convert grouped_collection_select to Simple Form in Rails dynamic menu?

Question

I have the following (and working) dynamic menu / dropdown which allows you to select a property type and then a property subtype with a regular rails form:

properties.js.coffee

jQuery ->
  prop_sub_types = $('#property_prop_sub_type_id').html()
  $('#property_prop_type_id').change ->
    prop_type = $('#property_prop_type_id :selected').text()
    escaped_prop_type = prop_type.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(prop_sub_types).filter("optgroup[label='#{escaped_prop_type}']").html()
    if options
      $('#property_prop_sub_type_id').html(options)
    else
      $('#property_prop_sub_type_id').empty()

_form.html.erb

<%= form_for(@property) do |f| %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :prop_type_id, 'Property Type' %><br />
    <%= f.collection_select :prop_type_id, PropType.order(:name), :id, :name, :prompt => "-- Select Property Type --" %>
  </div>
  <div class="field">
    <%= f.label :prop_sub_type_id, 'Property Subtype' %><br />
    <%= f.grouped_collection_select :prop_sub_type_id, PropType.order(:name), :prop_sub_types, :name, :id, :name, :prompt => "-- Select Property Subtype --"  %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

This works fine. However, I'd like to integrate this into a larger app that is already set up with the simple form gem. I'm also using twitter bootstrap via bootstrap-sass.

The closest I can get in my form is:

<div class="field">
        <%= f.association :prop_type, :input_html => { :id => "prop_type_id", :class => "span5" }, :prompt => "-- Select Property Type --" %>
        <%= f.association :prop_sub_type, :input_html => { :id => "prop_sub_type_id", :class => "span5" }, :prompt => "-- Select Property Subtype --" %>
</div>

Note: I had to change :prop_type_id to :prop_type to keep the app from throwing errors.

But this is not working - the second drop down won't map to the first. I a doing something wrong in my java/coffeescript? Is there such a thing as 'grouped_association' or something along those lines for the second dropdown?

Is this even doable, or should I convert the entire form back to the standard rails format?

UPDATE

I was able to get it to work but sticking the erb into divs as follows:

 <div class="field">
   <%= f.collection_select :prop_type_id, PropType.order(:name), :id, :name, :prompt => "-- Select Property Type --" %>
</div>
<div class="field">
   <%= f.grouped_collection_select :prop_sub_type_id, PropType.order(:name), :prop_sub_types, :name, :id, :name, :prompt => "-- Select Property Subtype --"  %>
</div>

Answer 1

You should have a look at the Group section in the simple_form_for github page. I was working on something similar to what you were doing and found this section. It gave me the direction that I needed to go. Instead of doing f.association which I used on other parts, I ended up using f.input with the :group_select and :group_method

f.input :country_id, collection: @continents, as: :grouped_select, group_method: :countries

from

simple_form_for github pag