Ruby on Rails - Load State and city when Country and State is selected
<p>I have <code>countries, states &amp; cities</code> Databases with their models <code>Country, State &amp; City</code>.</p>

<p><em>Current association:</em></p>

<pre><code>class Country &lt; ActiveRecord::Base
  has_many :states
end

class State &lt; ActiveRecord::Base
  belongs_to :country
  has_many :cities
end

class City &lt; ActiveRecord::Base
  belongs_to :state
end
</code></pre>

<p>Currently Im using this jQuery to only show states based on selected country, but it still loads all the states in the select[options] which slows down page load.</p>

<pre><code>- jQuery -&gt;
  states = $('#q_state_id_eq').html()
  update_states = -&gt;
    country = $('#q_country_id_eq :selected').text()
    options = $(states).filter("optgroup[label=#{country}]").html()

    if options
      $('#q_state_id_eq').html(options)
      # Add in a blank option at the top
      $('#q_state_id_eq').prepend("&lt;option value=''&gt;&lt;/option&gt;")
      # Ensure that the blank option is selected
      $('#q_state_id_eq option:first').attr("selected", "selected");
    else
      $('#q_state_id_eq').empty()

  $('#q_country_id_eq').change -&gt;
    update_states()

  update_states()
</code></pre>

<p>In my form (<em>I am using Simple_form_for</em>), how can I add <strong>collection_select/select</strong> for <code>countries, states &amp; cities</code> and <strong>ONLY LOAD</strong>, <strong>states</strong> when a <em>country</em> is selected and load <strong>cities</strong> when a <em>state</em> is selected?</p>

<p><em>PS: Loaded states and cities needs to be based on which country and state is selected.</em></p>

<p>Is there any gem for what I am looking for or a Ajax solution?
<em>(other solutions are also appreciated)</em></p>