Mehul Gurjar's Profile

How about I have city also.
Country, State, City.

I have Country has_many :states, State belongs to :country
State has_many :cities, City belongs_to :state

My grouped collection
<%= f.collection_select :country, Country.order(:name), :id, :name, include_blank: true %>
<%= f.grouped_collection_select :state, Country.order(:name), :states, :name, :id, :name, include_blank: true %>

<%= f.grouped_collection_select :city, State.order(:name), :cities, :name, :id, :name, include_blank: true %>

My Javascript is

jQuery(function() {
$j = jQuery.noConflict();
var states;
var cities;
$j('#use_test_state_id').parent().hide();
$j('#use_test_city_id').parent().hide();
states = $j('#use_test_state').html();
cities = $j('#use_test_city').html();
return $j('#use_test_country').change(function() {
var country, escaped_country, options;
country = $j('#use_test_country :selected').text();
escaped_country = country.replace(/([ #;&,.+*~\':"!^$[]()=>|\/@])/g, '\$1');
options = $j(states).filter("optgroup[label='" + escaped_country + "']").html();
if (options) {

$j('#use_test_state').html(options);
return $j('#use_test_state_id').parent().show();
} else {

$j('#use_test_state').empty();
return $j('#use_test_state_id').parent().hide();
}

var state, escaped_state, state_options;
state = $j('#use_test_state :selected').text();
console.log(state);
escaped_state = state.replace(/([ #;&,.+*~\':"!^$[]()=>|\/@])/g, '\$1');
state_options = $j(cities).filter("optgroup[label='" + escaped_state + "']").html();
if (state_options) {
$j('#use_test_city').html(state_options);
return $j('#use_test_city_id').parent().show();
} else {
$j('#use_test_city').empty();
return $j('#use_test_city_id').parent().hide();
}
});
});

but city drop down not showing .

can you please suggest what i missing ?