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

Question

我的 _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 中可用下拉列表，以及 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
  }
});

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

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