javascript - Rails，从下拉菜单中选择不会触发不同的过滤器

Question

我有一个事件表，我想根据下拉菜单中的选择进行过滤。但是，当我选择不同的项目时，不会触发任何操作，我只是最终打开默认值。该 View 似乎正常工作，我显示了表格和包含项目的框，只是选择不会改变任何内容。我猜测我的选择不会触发事件，因此 .coffee 中的部分有问题。这是相关代码，希望有人能帮忙:

事件.rb

scope :men, -> { where(team_id: 1) }
scope :women, -> { where(team_id: 2) }
scope :juniors, -> { where(team_id: 3) }

events_controller.rb

def index
    @events = Event.where("startdate >= ?", Date.today)
               .order("startdate, starttime")

    @events = apply_type_filter(@events)
end

def apply_type_filter(relation)
   case params[:filter]
   when "Men" 
      relation.men
   when "Women" 
      relation.women 
   when "Juniors"
      relation.juniors
   else
      relation
   end
end

index.html.erb

<div class="left">
<%= form_tag events_path, :method => 'get' do %>  
    <%= select_tag "filter", options_for_select([ "Alle", "Men", "Women", "Juniors" ], params[:filter]), class: 'my_filter' %>
<% end %>

事件.js:

$(function(){
 $('select.my_filter').on('change', function(){
  alert($(this).val())
  $(this).closest('form').submit()
 })
})

当我运行页面时，会生成以下 html 代码:

<div class="left">
<input type="text" class="filter" id="events-filter-input" placeholder="Termine filtern" />
<form accept-charset="UTF-8" action="/events" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>  
    <select class="my_filter" id="filter" name="filter"><option value="Alle">Alle</option>
<option value="Men">Men</option>
<option value="Women">Women</option>
<option value="Juniors">Juniors</option></select>
</form></div>

如果它也对 jacasvript 代码有帮助:

application.js:

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from example.com/assets/…
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.core
//= require jquery.ui.datepicker.js
//= require_tree .

application.html.erb:

<%= javascript_include_tag "application" %>

感谢您的帮助。作为补充，我想让用户可以定义应该首先为他显示哪个选择。我该怎么办？

谢谢

Answer 1

DOM 加载可能存在问题。您可以尝试以下两种方法之一: 1) 复制event.js中的JS并将其放入Index页面底部的标签中。 2) 全部删除 event.js 并将 :onchange => "this.form.submit() 添加到 select_tag 中。 这些是粗略且现成的方法，在类似情况下对我有用。