javascript - 带 form_tag 的动态选择菜单

Question

我有一个看起来像这样的表单标签表单

  = label_tag 'fund', 'Fund'
  = select_tag :fund_id,
    options_for_select(??????),
    class: 'form-control reports-filter-select',
    include_blank: "-- Select Funds --"

  = label_tag 'scenario', 'Scenario'
  = select_tag :scenario_id,
    options_for_select(?????),
    class: 'form-control reports-filter-select',
    include_blank: "-- Select Scenarios --"

= submit_tag 'Submit',
  class: 'btn btn-primary',
  id: 'create-geodistribution-chart',
  data: { chart_url: reports_geodistributions_states_path(':scenario_id') }
= link_to 'Clear', '', class: 'btn btn-default clear'

我想创建一个动态选择框......如果用户选择一个基金，属于该基金的所有场景将自动填充在场景选择框上

解决这个问题的最佳方法是什么

谢谢

Answer 1

我建议的解决方案是使用JS来检测第一个选择字段的onchange事件。然后发出ajax请求来获取第二个字段的数据。

首先，我将把第二个选择字段移动到部分字段中，然后可以在稍后的 ajax 调用之后重新加载它。

# /app/views/funds/_fund_scenarios.html.erb
<%= collection_select(:geodistribution, :fund_id, scenarios, :id, :name, { :prompt => "-- Select Scenarios --" }, :required => true, :class => "form-control" ) %>

然后在我们的 javascript 中，为了简单起见，我假设您在这里使用 jQuery 库。

// pass selected value to controller and populate scenarios field with results
$(document).on("change", "#fund_id", function(){
    if($(this).val() != "") {
      $.get("/funds/scenarios?fund_id="+$(this).val(), function(data){
        $("#scenario_id").html(data);
      });
    }
});

// vanilla JS alternative
field = document.getElementById("fund_id");
field.addEventListener("change", function() {
  var request = new XMLHttpRequest();
  request.open('GET', "/funds/scenarios?fund_id="+field.value, true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);
      document.getElementById("scenario_id").innerHTML(data);
    }
  };

  request.send();
}

然后在您的资金 Controller 中，您获取参数并进行查询。调整 @scenarios 实例变量以匹配您的模型。

def scenarios
  if params[:fund_id].present?
    @scenarios = Scenario.where(fund_id: params[:fund_id])
    render :partial => "fund_scenarios", :locals => { scenarios: @scenarios }
  end
end

不要忘记为 GET 请求设置路由

# /config/routes.rb
get "funds/scenarios", controller: "funds", action: "scenarios", as: :fund_scenarios

希望您可以调整它以满足您的需求。