动态更新 options_for_select

Question

我想根据第一个选择选项上的选择来填充第二个选择选项。我知道如何使用传统的 jquery 和 html 来做到这一点。但想知道是否有任何方法可以更新options_for_select。

如您所见，我在第一个选项中有一个辅助函数 city_for_select。我也想对第二种方法使用相同的方法。我将不胜感激。比你。

<div class="col-md-4">
    <%= f.label t('city'), class: "form-control-label" %><br>
    <%= f.select :city, options_for_select(city_for_select), {}, class: "form-control", id: "city" %>
</div>
<div class="col-md-4">
    <%= f.label t('area'), class: "form-control-label" %><br>
    <%= f.select :area, options_for_select(["Plz select"]), {}, class: "form-control", id: "area" %>
</div>

Answer 1

这是另一种做事方式。添加控制器功能和相关路由后，我使用 jquery 和 json 调用该功能并加载选择选项。这里不需要渲染局部。

控制器：请注意，您必须以 json 格式返回数据。

def area_for_city
  city = params[:city]
  if city == "city1"
    @areas = ["area1", "area2"]
  elsif city == "city2"
    @areas = ["area3", "area4"]
  elsif city == "city3"
    @areas == ["area5", "area6"]
  end

  render json: {areas: @areas}
end 

Javascript：

function populate_area(city_name){
  $.get("/get_area_for_city", {city: city_name}, function(data){
    var $area = $('#area');
    $area.empty();
    for (var i = 0; i < data.areas.length; i++) {
      $area.append('<option value=' + data.areas[i] + '>' + data.areas[i] + '</option>');
    }
  }, "json");
}
$(document).ready(function () {
  $("#city").change(function () {
      var val = $(this).val();
      if (val == "city1") {
          populate_area("city1");
      } else if (val == "city2") {
          populate_area("city2");
      } else if (val == "city3") {
          populate_area("city3");
      }
  });
});

问题中已经给出了 HTML。

Answer 2

您必须将第二个options_for_select 提取到控制器方法中。然后在第一个选择更改时使用一些 JS 调用所述方法。使用 jQuery 替换/设置第二个 options_for_select 的 HTML。

就像你说的那样。原理与传统 HTML/jQuery 相同，但 HTML 来自 rails 控制器

控制器：

def update_select
  # Your query here
  # Populate @t
end

查看（update_select.js.erb）：

$("#sencond_select").html("<%= j render partial: 'update_select' %>");

部分（_update_select.html.erb）：

<div class="col-md-4">
  <%= label_tag t('area'), nil, class: "form-control-label" %><br>
  <%= select_tag :area, options_for_select(["Plz select"]), class: "form-control", id: "area" %>
</div>