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

Posted 2023-05-09

【中文标题】导轨。 Dropdown1 使用 Ruby on Rails 启用 Drobdown2 选择

【英文标题】：Rails. Dropdown1 enables Drobdown2 selection using Ruby on Rails

【发布时间】：2018-05-05 21:13:37

【问题描述】：

我的_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 Seats 时，Flight 应该在 Seat 下拉列表中可用，并且 Room 下拉列表中的逻辑相同。

提前致谢。

【参考方案1】：

Ruby 还不够。你需要使用 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

然后重写座位输入，如：

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

这是一个简短的描述，我将如何处理你的任务。您可以对另一对下拉菜单执行相同操作。也许我的代码中存在一些错误（还没有测试过），但至少你会对如何前进有一个共同的理解。

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

【讨论】：

这对您有帮助吗？

是的。谢谢你的帮助老兄..！

@SattarJamali 欢迎您。如果您将我的问题标记为未来访问者的有效答案（左侧带有绿色勾号），那就太好了。提前致谢

亲爱的@AntonTkachov，我已经在完成时做了标记，但由于声誉问题，我的标记为有效答案没有显示出来。 :(