Question

我有一个模型的形式，表单有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>

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

更新你的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)

更新

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

Rails：以编辑形式预先填充Ajax select

更新

1 个答案:

更新