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

Question

我有一个模型的表单，表单有 2 个选择，一个用于州，另一个用于城市，当然，当您选择一个州时，城市选择是使用 ajax 填充的，我在显示选择时遇到问题编辑表单中的值，这是表单：

#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>

我有这个咖啡脚本代码，更新城市选择状态时选择一个状态，并且当页面加载时，它查找所有状态选择（它们可以是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)

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

更新

正如你所要求的，这里是我上面所说的可视化。

• 当您进入编辑页面时，您会看到最后选择的州，但不会看到最后选择的城市：

• 我需要在编辑表单中查看最后选择的城市：

注意：'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"

更新您的咖啡脚本：

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

更新

修正了城市 select_tag 中的语法错误