SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

Country State Select is a library that provides an easy API to generate Country , State / Province and City dropdowns for use in forms.

We will refer :-

https://github.com/arvindvyas/Country-State-Select

Gemfile

gem 'chosen-rails'
gem 'country_state_select', git: 'git://github.com/arvindvyas/Country-State-Select', branch: :master
gem "simple_form"#, "~> 3.2"
gem "reform"#, "~> 2.0"
gem "reform-rails"

orders_controller.rb

class OrdersController < ApplicationController
    def shipping_address
        @location = Address.new
    end
end

shipping_address.html.erb

 <%= simple_form_for @location,  :html => {class: 'subscribe-from'} ,url: orders_shipping_address_path do |f| %>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <%= f.input :address_line1, label: "Country", collection: CountryStateSelect.countries_collection %>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <%= f.input :state, CountryStateSelect.state_options(label: "State / Province", form: f, field_names: { :country => :address_line1, :state => :home_state } ) %>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <%= f.text_field :city, CountryStateSelect.city_options(label: "City ", form: f, field_names: {  :state => :state, :city => :home_city } ) %>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= f.submit "Sign up", class: "btn btn-success btn-block" %>
    </div>
  </div>
<%end%>
<script type="text/javascript">
    $(document).on('ready page:load', function() {
      return CountryStateSelect({
        chosen_ui: true,
        country_id: "address_address_line1",
        state_id: "address_state",
        city_id: "address_city",
        city_place_holder: "Please select city",
        state_place_holder: 'Please select state'
      });
    });
</script>

Include the JS file :-

country_state_select.js.erb

function CountryStateSelect(options) {
  var state_id = options['state_id'];
  var country_id = options['country_id'];
  var city_id = options['city_id'];

  var state_name = $('#' + state_id).attr('name');
  var state_class = $('#' + state_id).attr('class');

  var city_name = $('#' + city_id).attr('name');
  var city_class = $('#' + city_id).attr('class');

  return statesDropdown();

  // ====== ***** METHODS ***** ===================================================================== //
  function statesDropdown() {

    addChosenToCountry();
    addChosenToState();
    addChosenToCity();

    $("#" + country_id).change(function () {
      return findStates($(this).val());
    });

  }

  function citiesDropdown() {
     $("#" + state_id).change(function () {
      return findCities($("#" + state_id).val(),$("#" + country_id).val());
    });
  }

  function addChosenToState(){
    if (chosenIsRequired() && stateIsNotText()) {
      $('#' + state_id).chosen(options['chosen_options']);
    }
  }

  function addChosenToCity(){
    if (chosenIsRequired() && cityIsNotText()) {
      $('#' + city_id).chosen(options['chosen_options']);
    }
  }

  function stateIsNotText(){
    return !$('#' + state_id).is("[type=text]");
  }

  function cityIsNotText(){
    return !$('#' + city_id).is("[type=text]");
  }

  function addChosenToCountry(){
    if (chosenIsRequired()) {
      $('#' + country_id).chosen(options['chosen_options']);
    }
  }

  function removeChosenFromFields(){
    if (chosenIsRequired()) {
      $("#" + options['state_id'] + "_chosen").remove();
      $("#" + options['city_id'] + "_chosen").remove();
    }
  }

  function removeChosenFromCityFields(){
    if (chosenIsRequired()) {
      $("#" + options['city_id'] + "_chosen").remove();
    }
  }

  function chosenIsRequired(){
    return options.hasOwnProperty("chosen_ui") && options['chosen_ui'];
  }

  function findStates(id) {

    //Remove all Chosen from existing fields
    removeChosenFromFields();
    findCities('','')

    //Perform AJAX request to get the data; on success, build the dropdown
    $.ajax({
      url: "/find_states",
      type: 'post',
      dataType: 'json',
      cache: false,
      data: {country_id: id},
      success: function (data) { buildStatesDropdown(data) }
    });
  }

  function findCities(state_id, country_id) {

    //Remove all Chosen from existing fields
    removeChosenFromCityFields();

    //Perform AJAX request to get the data; on success, build the dropdown
    $.ajax({
      url: "/find_cities",
      type: 'post',

      dataType: 'json',
      cache: false,
      data: {
        country_id: country_id,
        state_id: state_id
      },
      success: function (data) { buildCitiesDropdown(data) }
    });
  }

  //Build the HTML for our dropdown menus
  function buildStatesDropdown(data) {

    if (data.length === 0) {
      html = '<input id="' + state_id + '" name="' + state_name + '" class="' + state_class + '" type="text"  type="text" value="" >';
    } else {
      html = '<select id="' + state_id + '" name="' + state_name + '" class="' + state_class + '" >';
      html += '<option>'+ find_select_option_text('state') +'</option>'

      for (i = 0; i < data.length; i++) {
        html += '<option value='+data[i][0]+'>' + data[i][1] + '</option>';
      }

      html += '</select>';
    }


    $('#' + state_id).replaceWith(html);

    //This has to happen AFTER we've replaced the dropdown or text
    if (data.length > 0) {
      addChosenToState();
    }

    // [142] FIXME # Is there any other way to call city method , it is adding change method in every state change
    if(typeof city_name !== "undefined" ){
      citiesDropdown();
    };

  }

  function find_select_option_text(type){
     if (type === 'city'){
       return options['city_place_holder'];
     }else{
       return options['state_place_holder']
     }

  }

  function buildCitiesDropdown(data) {

    if (data.length === 0) {
      html = '<input id="' + city_id + '" name="' + city_name + '" class="' + city_class + '" type="text"  type="text" value="" >';
    } else {
      html = '<select id="' + city_id + '" name="' + city_name + '" class="' + city_class + '" >';
      html += '<option>'+ find_select_option_text('city') +'</option>'
      for (i = 0; i < data.length; i++) {
        html += '<option>' + data[i] + '</option>';
      }

      html += '</select>';
    }

    $('#' + city_id).replaceWith(html);

    //This has to happen AFTER we've replaced the dropdown or text
    if (data.length > 0) {
      addChosenToCity();
    }
  }
}