title: using the city-state gem in rails
body: <p>Hey guys im currently working on a devise sign up form, the end goal is  a user can select a state from the united states and a select tag below will populate with the correct cities in that state. im using the city-state gem. <a href="https://github.com/loureirorg/city-state" rel="nofollow noreferrer">https://github.com/loureirorg/city-state</a></p>
  
  <p>ive looked at other examples like this one <a href="https://forum.upcase.com/t/dependent-country-city-state/7038" rel="nofollow noreferrer">https://forum.upcase.com/t/dependent-country-city-state/7038</a> my code is below </p>
  
  <p><strong>routes.rb</strong></p>
  
  <pre><code>resources :states, only: :new 
  </code></pre>
  
  <p><strong>registrations.new.html.erb</strong></p>
  
  <pre><code>   &lt;div class="field"&gt;
          &lt;%= f.select :state, options_for_select(CS.states(:us)), {:prompt =&gt; "State"}, {:class =&gt; "signup-input-container--input", :id =&gt; "state-picker"} %&gt;
     &lt;/div&gt;
     &lt;div class="field"&gt;
          &lt;%= f.select :city, options_for_select([]),{}, {:class =&gt; "signup-input-container--input", :id =&gt; "city-picker"} %&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code> document.addEventListener("turbolinks:load", function(){
    var state = document.getElementById("state-picker");
    state.addEventListener("change", function() {
      Rails.ajax({
       url: "/states?country=" + "United States" + "&amp;state=" + 
       state.value,
       type: "GET"
      })
    })
  });
  </code></pre>
  
  <p><strong>registrations-controller.erb</strong></p>
  
  <pre><code> def new
    super
    @cities = CS.get(:us, params[:state])
   end
  </code></pre>
  
  <p><strong>new.js.erb</strong></p>
  
  <pre><code>    var city = document.getElementById("city-picker");
  
      while (city.firstChild) city.removeChild(city.firstChild);
  
      var placeholder = document.createElement("option");
      placeholder.text = "Choose a city";
      placeholder.value = "";
      city.appendChild(placeholder);
  
     &lt;% @cities.each do |c| %&gt;
       city.options[city.options.length] = new Option('&lt;%= c %&gt;');
     &lt;% end %&gt;  
  </code></pre>
  
  <p>im trying to get this to work the way the example link shows. the only difference is that users will only choose states from the US and citys</p>