Rails：在编辑表单中预填充Ajax select

I have a form of a model, the form has 2 selects, one is for State and the other is for City, of course the City select is filled using ajax when you select a state, Im having problems when showing the selected values in edit form, this is the form:

我有一个模型的形式，表单有2个选择，一个用于State，另一个用于City，当然选择状态时使用ajax填充City选项，我在编辑时显示所选值时遇到问题形式，这是形式：

#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 cities select when a state is selected and also when the page loads it looks for all the state selects (they can be 1 or more it is a nested form) and updates the cities for each state select:

我有这个咖啡脚本代码，当选择状态时更新城市选择，并且当页面加载时它查找所有状态选择（它们可以是1或更多它是嵌套形式）并更新每个州选择的城市：

$ ->
  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)

Well this code works ok, however when I go to the edit page the cities select is updated with the last selected state but I do not know how to get the selected city from the model =/, I need to show the selected state and also the selected city. So far it loads the list of cities for the last selected state but does not detect the selected city from the model, how to do this?

那么这段代码工作正常，但是当我进入编辑页面时，城市选择更新了最后选择的状态，但我不知道如何从模型中获取所选城市= /，我需要显示所选状态以及选定的城市。到目前为止，它加载了最后选择状态的城市列表，但没有从模型中检测到所选城市，如何做到这一点？

Update

Well as you requested here is a visualization of what I say above.

那么你在这里要求的是我上面所说的可视化。

• When you go to the edit page you will see the last selected state but not the last selected city:
• 当您转到编辑页面时，您将看到最后选择的状态，但不会显示最后选择的城市：

• I need to see the last selected city in the edit form:
• 我需要在编辑表单中看到最后选择的城市：

Note: 'Seleccionar' is the default option, it is equivalent to "-Select-" in english.

注意：'Seleccionar'是默认选项，相当于英文中的“-Select-”。

1 个解决方案

#1

In your 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), {}, { "data-selected" => f.object.city } %>
</div>

Now the select of city will have attribute data-selected="YOUR_SELECTED_VALUE"

现在，城市的选择将具有属性data-selected =“YOUR_SELECTED_VALUE”

Update your 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

Fixed syntax error in the select_tag of city

修复了city_tag中的语法错误