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

Question

我的 _form.html.erb 中有两个 DropDown(例如 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 中可用下拉列表，和 Room 的逻辑相同下拉列表。

提前致谢。

Answer 1

Ruby 对此还不够。你需要使用javascript来实现你想要的。我们去坐吧。如果您希望根据航类加载座位，则应首先设置一个 Controller 操作，该操作将接受 fligh_id 并返回 JSON 格式的座位数组。我会将此 Controller 放入命名空间并将其放置在 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

然后重写座位输入，例如:

<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
  }
});

这是我将如何完成您的任务的简短描述。您可以对另一对下拉菜单执行相同的操作。也许我的代码中存在一些错误(尚未测试过)，但至少您会对如何继续前进有共同的理解。

如果需要任何帮助，请写评论