Question

我正在创建一个将在Rails 4.2.1中发送电子邮件的表单。在表单的底部，用户将从3个下拉选择中选择电子邮件收件人的类型。用户必须填写第一个下拉列表，但其他两个下拉列表是可选的，更具体的收件人组。第一个下拉选项来自模型A，第二个来自模型B，第三个来自模型C.模型A has_many模型B记录，模型B has_many模型C记录。如何在不刷新或提交表单的情况下使用基于先前输入的模型查询中的信息更新下一个下拉列表？

TL; DR This solution，但是从Rails模型中获取数据。

示例中的模型：

# contains groupings of recipients
class ModelA < ActiveRecord::Base
  has_many :model_bs
end

# contains a smaller, more specific grouping of recipients
class ModelB < ActiveRecord::Base
  has_many :model_cs
end

# even more specific groups of recipients
class ModelC < ActiveRecord::Base

end

如果您需要更多信息，请与我们联系。

Answer 1

知道您有3种型号：

A型
B型
C型

并假设您创建了3个下拉列表：

<%= select_tag :modelA, options_for_select(@modelA.collect{|p| [p.name, p.id]}, selected: params[:modelA]), prompt: "Select modelA", class: "form-control", id: "modelA-select" %>

<%= select_tag :modelB, options_for_select(@modelB.collect{|p| [p.name, p.id]}, selected: params[:modelB]), prompt: "Select modelB", class: "form-control", id: "modelB-select" %>

<%= select_tag :modelC, options_for_select(@modelC.collect{|p| [p.name, p.id]}, selected: params[:modelC]), prompt: "Select modelC", class: "form-control", id: "modelC-select" %>

第1步：在控制器上，您应该添加：

   @modelA = ModelA.all
   @modelB = []
   @modelC = []

步骤2：客户端向服务器发送请求，然后接收响应，然后构建下拉列表modelB和modelC。

$(document).on("change", "#modelA-select", function(){
  var modelA = $(this).val();

  $.ajax({
    url: _YOUR_URL_,
    method: "GET",
    dataType: "json",
    data: {modelA: modelA},
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);
      var modelB = response["modelB"];
      $("#modelB-select").empty();

      $("#modelB-select").append('<option>Select modelB</option>');
      for(var i=0; i< modelB.length; i++){
        $("#modelB-select").append('<option value="' + modelB[i]["id"] + '">' + modelB[i]["name"] + '</option>');
      }
    }
  });
});

$(document).on("change", "#modelB-select", function(){
  var modelB = $(this).val();

  $.ajax({
    url: _YOUR_URL_,
    method: "GET",
    dataType: "json",
    data: {modelB: modelB},
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);
      var modelC = response["modelC"];
      $("#modelC-select").empty();

      $("#modelC-select").append('<option>Select modelC</option>');
      for(var i=0; i< modelC.length; i++){
        $("#modelC-select").append('<option value="' + modelC[i]["id"] + '">' + modelC[i]["name"] + '</option>');
      }
    }
  });
});

步骤3：服务器收到请求，然后计算结果并将结果发送给客户端。

if params[:modelA].present?
  @modelB = ModelA.find(params[:modelA]).modelB
end
if request.xhr?
  respond_to do |format|
    format.json {
      render json: {modelB: @modelB}
    }
  end
end

if params[:modelB].present?
  @modelC = ModelB.find(params[:modelB]).modelC
end
if request.xhr?
  respond_to do |format|
    format.json {
      render json: {modelC: @modelC}
    }
  end
end

如果您需要更多information

，这里只是免责声明。

如何根据另一个下拉列表的值更新下拉列表选择从单独的Rails模型

1 个答案: