Rails: Prepopulate Ajax select in edit form

Question

I have a model form, the form has 2 choices, one for the state, and the other for the city, of course, the city selection is filled using ajax when choosing the state, I have problems when displaying the selected value in the editing form, this is the form:

#Im just showing you the section where the selects are.
<div class="small-4 columns state-select">
        <%= f.label :state, 'Departamento' %>
        <%= f.select :state, options_for_select(states_with_default.collect { |key, value|
            [value.titleize, key] }, f.object.state) %>
    </div>
    <div class="small-4 columns city-select">
        <%= f.label :city, 'Ciudad' %>
        <%= f.select :city, options_for_select([], 0) %>
    </div>

I have this coffee script code that updates the city when choosing a state, and also, when the page loads, it searches for all selected states (they can be 1 or more, this is a nested form) and updates the cities for each state choice:

$ ->
  updateCitiesOferts = ($state_input) ->
    console.log $state_input
    $input_city = $state_input.parents().first().next().find('select')
    $.getJSON('/cities/' + $state_input.val(), (data) ->
      $input_city.empty()
      if not $.inArray('orders', window.location.pathname.split( '/' ))
        all_cities_option = '<option value="all">Todo el departamento</select>'
        $input_city.append all_cities_option
      for i in data
        opt = "<option value=\"#{i}\">#{i}</option>"
        $input_city.append opt
    )
  $(document).on 'change', '.state-select select', ->
    updateCitiesOferts $(@)

  for state_input in $('.state-select select')
    updateCitiesOferts $(state_input)

, , , , , , =/, . , , ?

Update

, , , .

• , , :

• :

. "Seleccionar" , "-Select-" .

Answer 1

:

#Im just showing you the section where the selects are.
<div class="small-4 columns state-select">
        <%= f.label :state, 'Departamento' %>
        <%= f.select :state, options_for_select(states_with_default.collect { |key, value|
            [value.titleize, key] }, f.object.state) %>
</div>
<div class="small-4 columns city-select">
    <%= f.label :city, 'Ciudad' %>
    <%= f.select :city, options_for_select([], 0), {}, { "data-selected" => f.object.city } %>
</div>

data-selected="YOUR_SELECTED_VALUE"

coffeescript:

$ ->
  updateCitiesOferts = ($state_input) ->
    console.log $state_input
    $input_city = $state_input.parents().first().next().find('select')
    $.getJSON('/cities/' + $state_input.val(), (data) ->
      $input_city.empty()
      if not $.inArray('orders', window.location.pathname.split( '/' ))
        all_cities_option = '<option value="all">Todo el departamento</select>'
        $input_city.append all_cities_option
      for i in data
        opt = if i == $input_city.data("selected")
          "<option value=\"#{i}\" selected=\"selected\">#{i}</option>"
        else
          "<option value=\"#{i}\">#{i}</option>"
        $input_city.append opt
    )
  $(document).on 'change', '.state-select select', ->
    updateCitiesOferts $(@)

  for state_input in $('.state-select select')
    updateCitiesOferts $(state_input)

Update

​​ select_tag