jquery - 轨。 Dropdown1使用Ruby on Rails启用Drobdown2选择

我的_form.html.erb中有两个下拉列表（比如dropdown1和dropdown2）。
这是_form.html.erb的代码（我需要帮助）；

  <div class="input-group">
    <%= f.label :flight_id %><br>
    <%= f.collection_select :flight_id, Flight.all, :id, :airline %>
  </div>
  <div class="input-group">
    <%= f.label :seat_no %><br>
    <%= f.text_field :seat_no %>
  </div>
  <div class="input-group">
    <%= f.label :hotel_id %><br>
    <%= f.collection_select :hotel_id, Hotel.all, :id, :hotel_name %>
  </div>
  <div class="input-group">
    <%= f.label :room_no %><br>
    <%= f.text_field :room_no %>
 </div>

在这里，我要将seat_no和room_no转换为依赖Drop down列表，分别依赖于Flight和Hotel。
当我在Flight下拉列表中选择Flight座位时，Seat下拉列表的逻辑应该相同。
提前谢谢。

最佳答案

鲁比还不够。你需要使用javascript来实现你想要的。我们坐着去吧。如果您希望根据航班装载座位，则应首先设置一个控制器操作，该操作将接受fligh_id并返回json格式的座位数组。我会将这个控制器放入名称空间并将其放入app/controllers/ajax/seats_controller.rb：

class Ajax::SeatsController < ApplicationController
  def index
    @seats = Seat.where(fligh_id: params[:flight_id])
    render json: @seats
  end
end

在routes.rb：

namespace :ajax do
  resources :seats_controller, only: :index
end

然后重写seats输入，如下所示：

<div class="input-group" style="display: none">
  <%= f.label :seat_no %><br>
  <%= f.text_field :seat_no %>
</div>

在app/assets/javascripts/[your_controller].js：

$('#[your_flight_dropdown_html_id]').onchange(function() {
  $.getJSON('/ajax/seats', { flight_id: $('#[your_flight_dropdown_html_id]').val(), function(data) {
    // destroy all existing seat options
    // loop through data and fill in new seat options
    // Make seats dropdown visible
  }
});

这是一个简短的描述，我将如何执行你的任务。对于另一对下拉列表，您也可以这样做。也许我的代码中有一些错误（还没有测试过），但至少你对如何前进有了共同的理解。
如果需要帮助，请写一条评论