4下拉菜单，在搜索之前根据选择更新每个菜单

4 Drop down menus, update each one based on the selection before to SEARCH

本文关键字：选择 更新 菜单 下拉菜单 搜索      更新时间：2024-03-10

我正在RubyonRails中创建一个电影院应用程序，目前正在进行预订。

我想做的是实现搜索，这样用户就可以搜索一个空闲座位，选择那个座位，然后预订那个座位观看电影。

为此，我想实现4个下拉菜单：电影、放映、屏幕和座位。但困难在于，我希望下拉菜单是动态的，并根据之前的选择进行更新，所以当用户选择一部电影时，放映下拉菜单只显示该电影的放映，当选择放映时，屏幕下拉菜单只会显示放映所在的屏幕，然后使用屏幕下拉菜单，使得座位下拉菜单仅显示在该屏幕中的座位。

到目前为止，我已经允许用户搜索屏幕，然后当他们点击搜索时，可用的座位显示在seats/index.html.erb.上

这是使用partial_booking_lookup.html.erb:完成的

<%= form_tag my_path, :method=>'post', :multipart => true do %>
<%= select_tag ('screen_id'), 
    options_from_collection_for_select(@screens, :id, :screens_info, 0 ),
    :prompt => "Screen" %> 

<%= submit_tag 'Search' %>
<% end %>

显示在layouts/application.html.erb:上

<%= render(:partial => '/booking_lookup', :locals=> {:film => @films = Film.all, :showings => @showings = Showing.all, :screens => @screens = Screen.all, :seats => @seats = Seat.all, :my_path => '/seats/display_seats_by_screen' }) %>

并链接到座椅中的display_seats_by_screen _控制器：

    def display_seats_by_screen
    @seats = Seat.screen_search(params[:screen_id])
    if @seats.empty?
        # assign a warning message to the flash hash to be displayed in
        # the div "feedback-top"
        flash.now[:alert] = "There are no films of that genre."
        # return all products, in alphabetical order
        @seats = Seat.all
    end
    render :action => "index"
end

在seat.rb模型中使用screen_search的：

def self.screen_search(search_string)
    self.where("screen_id = ?", search_string)
end

因此，基本上对于以上内容，在用户选择屏幕之前，他们应该选择一个放映，并且在此之前选择一部电影，以便只显示该放映的屏幕，以便他们可以选择合适的座位。

模型协会：电影：

has_many :showings
belongs_to :certificate
belongs_to :category

显示：

belongs_to :film
has_many :bookings
belongs_to :screen

屏幕：

has_many :seats

座椅：

belongs_to :screen
has_many :bookings

有人能帮忙吗？

下面是一个示例jsfiddle:

它对第一个有效，但不是动态的。html:

<p>films</p>
<div data-film1='["showing1_value","showing2_value"]' data-film2='["showing3_value","showing4_value"]'> 
    <select name="user[films]" id="films" class="select"><option value=""></option>
        <option value="film1">transformers</option>
        <option value="film2">the hangover</option>
    </select>
</div>   
<p>showing</p>    
<div data-showing1='["screen1_value","screen2_value"]' data-showing2='["screen3_value","screen4_value"]'> 
    <select name="user[showing]" id="showing" class="select">
        <option value=""></option>
        <option value="showing1_value">showing1</option>
        <option value="showing2_value">showing2</option> 
        <option value="showing3_value">showing3</option> 
        <option value="showing4_value">showing4</option> 
</select>
</div>

js:

 $('#films').change(function(){
     if ($("#films").val() == "film1"){
         //you can get this films shows:
         alert (   $("#films").parent().data("film1")   );
         //now you need to ajust the showing dropdown according: something like this:
         $("#showing").html('<option value=""></option>');
         $.each( $("#films").parent().data("film1"), function( index, show ){
            $("#showing").append('<option value="' + show + '">' + show + '</option>');
         });
     }    
});

由于js只适用于当前页面，我不会把它放在application.js中（它会包含在每一页上），我会把它放到相关页面上，因为它只适用于该页面。

当然，在服务器端，您需要设置数据属性。

我所做的是将每部电影的放映作为数据属性，然后当用户选择该电影时，我使用该电影的属性（包含该电影的相关放映）来创建下一个下拉列表，如所示

现在是轨道部分：

在该页面控制器动作中，你会有这样的东西：

#now it doesn't matter how you do it, you can choose your own way
#but eventually you need like seen here, only that it includes all the films,
#and for each film all his showings.
@films = Film.all
@film_data_attributes_string = ""
@films.each do |film|
  film_str = "data-#{film.title}="                   #this should give: data-tranformers=
  part_two_1 = "'['""                                  #this should give '['"

  film_showings_array = film.showings                          #this will give the film's showins. since film has_many :showings, 
  showings_array_names = film_showings_array.map(&:name)       #this will give an array of the showing's titles
  part_two_2 = showings_array_names.join('","')                #this should give a string:    showing3_value","showing4_value


  part_two_3 = "'"]'"                                  #this should give "]'
  @film_data_attributes_string << film_str + part_two_1 + part_two_2 + part_two_3 + " "
  #all together:          data-tranformers='["showing1_value","showing2_value"]' 
  #notice there is a space in the end
end

这将（或多或少）为您提供电影的数据属性。它没有经过测试，但这是主要的想法。假设你的电影和放映都有一个叫做"名字"的属性。（当然，最好将所有功能转移到胶片模型上，而不是在控制器中使用）

然后在视图中，您将使用@film_data_attributes_string，当然，也许您需要使用html转义或其他什么，不确定。

或者你可以使用这个答案

并使用这个替代：

@data_hash = {}
@films.each do |film|
  @data_hash["data-#{film.title}"] = film.showings.map(&:name).to_json
end

您需要对java脚本执行类似的操作。

相关文章：