Javascript 以简单形式呈现动态选择列表

我对JS/Ajax比较陌生，我知道如何根据以前以相同（简单）形式插入的数据呈现动态选项

上下文：通过应用程序，自行车连锁店（“连锁店”）可以出租

• 名称为“bike 1”或“yellow bike”（“bikes”）的自行车
• 通过挑选自行车类型，如山地自行车、城市自行车等（“自行车类型”），以及
• 自行车选项，如头盔等（“自行车选项”）
• 这取决于单个自行车商店（“自行车商店”）
• 自行车和期权的租金将全部记录在订单中（“订单”）
• 订单和自行车之间的关系是多对多的，因此-我创建了一个表来连接这个（'order\u bikes'））

悬而未决的问题：我可以通过JS获得自行车类型id。我如何使用该自行车类型的id以相同的形式显示属于该自行车类型的自行车

如前所述，不幸的是，我不太熟悉JS/Ajax在rails应用程序中的用法，因此如果可以在建议的代码编写位置（例如app/javascript/components/order.JS等）添加文件路径，那将是非常有帮助的

最后注释：

• 在租赁流程之前，连锁店所有者首先创建了他/她（i）bike_商店，（ii）bike_类型，（iii）bike和（iv）bike_选项，这部分应用程序正在运行。因此，他/她只需要从先前创建的现有库存中选择自行车类型/自行车/选项
• 我通过省略bike_选项来限制问题的范围，这主要是为了提供一些上下文，以便理解db模式的构建

模型

class Order < ApplicationRecord
  belongs_to :bike_store
  has_many :bike_types, through: :bike_store
  has_many :order_bikes, inverse_of: :order, dependent: :destroy
  accepts_nested_attributes_for :order_bikes, allow_destroy: true
end


class OrderBike < ApplicationRecord
  belongs_to :bike
  belongs_to :order
  accepts_nested_attributes_for :bike
end


class Bike < ApplicationRecord
  belongs_to :bike_type
  validates :name, presence: true
  has_many :order_bikes
  has_many :orders, through: :order_bikes
end


class BikeType < ApplicationRecord
  belongs_to :bike_store
  has_many :bikes, dependent: :destroy
  accepts_nested_attributes_for :bikes, allow_destroy: true
  has_many :bike_options, dependent: :destroy
  accepts_nested_attributes_for :bike_options, allow_destroy: true
  validates :name, :bike_count, presence: true
end

class BikeStore < ApplicationRecord
  has_many :bike_types, dependent: :destroy
  has_many :orders, dependent: :destroy
end

类顺序

订单控制器

class OrdersController < ApplicationController

  def new
    @bike_store = BikeStore.find(params[:bike_store_id])
    @order = Order.new
    @order.order_bikes.build
    @bike_type_list = @bike_store.bike_types
  end

  def create
    @order = Order.new(order_params)
    @bike_store = BikeStore.find(params[:bike_store_id])
    @order.bike_store = @bike_store
    @order.save
    redirect_to root_path
  end

private
  def order_params
    params.require(:order).permit(:arrival, :departure,
      order_bikes_attributes: [:id, :bike_id,:bike_quantity, :_destroy,
        bikes_attributes: [:id, :name,
          bike_types_attributes: [:id, :name]]])
  end
end

  def new
    @bike_store = BikeStore.find(params[:bike_store_id])
    @order = Order.new
    @order.order_bikes.build
    @bike_type_list = @bike_store.bike_types

    if params[:bike_type].present?
      @bikess = BikeType.find(params[:bike_type]).bikes
    end
    if request.xhr?
      respond_to do |format|
        format.json {
        render json: {bikes: @bikes}
      }
    end
  end
end
  end

class OrdersController

视图/订单/new.html.erb

<%= simple_form_for [@bike_store, @order] do |f|%>

  <%= f.simple_fields_for :order_bikes do |order_bike| %>
    <%= order_bike.input :bike_quantity %>

      <%= order_bike.simple_fields_for :bikes do |bike| %>

        #fist a bike_type will be classified, see below
        <%= bike.select :bike_type_id, options_for_select(@bike_type_list.collect{|type|[type.name, type.id]}) %>
      <% end %>

      #then a dropdown of bikes belonging to above chose bike_type need to be displayed below.
      <%= order_bike.association :bike, collection [bike_type.bikes] %>
  <% end %>

  <%= f.input :arrival %>
  <%= f.input :departure %>
  <%= f.submit %>
<% end %>

<script>
  // return id bike_type
  function selectType(){
  const bikeType = document.getElementById("order_order_bikes_attributes_0_bikes_bike_type_id").value;
  }
</script>

#首先，自行车类型将被分类，见下文
#然后，需要在下面显示属于上述所选自行车类型的自行车下拉列表。
//返回标识类型
函数selectType（）{
const bikeType=document.getElementById（“订单\订单\自行车\属性\ 0 \自行车\类型\ id”）.value；
}

哇，弄明白这一点很痛苦/花了一些时间。。。。对于看到这一点的人们，我找到了一个有效的答案，希望它能为你们节省一些时间

我很确定这不是最优雅的解决方案，所以请随意优化。我是用Ajax实现的，请在下面找到解决方案：

视图中的

<%= simple_form_for [@bike_store, @order] do |f|%>

  <%= f.simple_fields_for :order_bikes do |order_bike| %>
    <%= order_bike.input :bike_quantity %>

      <%= order_bike.simple_fields_for :bikes do |bike| %>

        #fist a bike_type will be classified, see below
        <%= bike.select :bike_type_id, options_for_select(@bike_type_list.collect{|type|[type.name, type.id]}) %>
      <% end %>

      #then a dropdown of bikes belonging to above chose bike_type need to be displayed below.
      <%= order_bike.association :bike, collection [bike_type.bikes] %>
  <% end %>

  <%= f.input :arrival %>
  <%= f.input :departure %>
  <%= f.submit %>
<% end %>

<script>

$(document).on("change", "#order_order_bikes_attributes_0_bikes_bike_type_id", function(){
    var bike_type = $(this).val();

   $.ajax({
    url: "/bike_stores/<%= @bike_store.id %>/orders/new",
    method: "GET",
    dataType: "json",
    data: {bike_type: bike_type},
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);
      var bikes = response["bikes"];
      $("#order_order_bikes_attributes_0_bikes_bike_type_id").empty();

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

---

哇，弄明白这件事很痛苦/花了一些时间。。。。对于看到这一点的人们，我找到了一个有效的答案，希望它能为你们节省一些时间

我很确定这不是最优雅的解决方案，所以请随意优化。我是用Ajax实现的，请在下面找到解决方案：

视图中的

<%= simple_form_for [@bike_store, @order] do |f|%>

  <%= f.simple_fields_for :order_bikes do |order_bike| %>
    <%= order_bike.input :bike_quantity %>

      <%= order_bike.simple_fields_for :bikes do |bike| %>

        #fist a bike_type will be classified, see below
        <%= bike.select :bike_type_id, options_for_select(@bike_type_list.collect{|type|[type.name, type.id]}) %>
      <% end %>

      #then a dropdown of bikes belonging to above chose bike_type need to be displayed below.
      <%= order_bike.association :bike, collection [bike_type.bikes] %>
  <% end %>

  <%= f.input :arrival %>
  <%= f.input :departure %>
  <%= f.submit %>
<% end %>

<script>

$(document).on("change", "#order_order_bikes_attributes_0_bikes_bike_type_id", function(){
    var bike_type = $(this).val();

   $.ajax({
    url: "/bike_stores/<%= @bike_store.id %>/orders/new",
    method: "GET",
    dataType: "json",
    data: {bike_type: bike_type},
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);
      var bikes = response["bikes"];
      $("#order_order_bikes_attributes_0_bikes_bike_type_id").empty();

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

---

这篇文章救了我的命并给出了正确的解释：这篇文章救了我的命并给出了正确的解释：