Как обновить выпадающий выбор на основе значения другого выпадающего выбора из отдельных моделей Rails

Question

Я создаю форму, которая будет отправлять электронные письма в Rails 4.2.1.В нижней части формы пользователь выберет тип получателей электронной почты из трех выпадающих списков.Пользователь должен заполнить первый раскрывающийся список, но два других раскрывающихся списка являются необязательными, более конкретными группами получателей.В первом раскрывающемся списке выбираются параметры из модели A, второй - из модели B, а третий - из модели C. Записи модели A has_many модели B и записи модели B has_many модели C.Как я могу обновить следующий выпадающий список информацией из запроса модели, основанной на предыдущем вводе, без обновления или отправки формы?

TL; DR Это решение , но получение данных из модели 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

Просто заявление об отказе от ответственности приведено здесь, если вам нужна дополнительная информация