使用 Rails、Ajax 和 Jquery 根据下拉列表更改内容

Question

我正在尝试根据collection_select下拉列表中的选择显示数据库中球队的最近得分。我知道我需要侦听下拉列表中的更改事件，但我不知道如何执行 AJAX 请求或如何在视图中显示数据。

Answer 1

好的，我将用category和subcategory模型编写一个示例。

首先是模型之间的关系：

class Category
 has_many :subcategories
 has_many :objects
end
class Subcategory
 belongs_to :category
 has_many :objects
end
class Object
 belongs_to :category
 belongs_to :subcategory
end

现在查看表单，例如带有simple_form gem（您可以使用form_for

）：

<%= simple_form_for(@object, :html => {:multipart => true }) do |f| %>
 <%= f.input :category, :collection => Category.all :prompt => "Select Category" %>
 <%= f.input :subcategory, :label_html => { :class => 'subcategory_label_class' } do %>
 <%= f.grouped_collection_select :subcategory_id, Category.order_by(:title), :subcategories, :title, :id, :name, include_blank: true %>
 <% end %>
 <%= f.button :submit %>
<% end %>

这样，我们将子类别与其父类别分组。

下一步，您必须将代码添加到对象.js.coffee

$('#object_subcategory_id').parent().hide()
  subcategories = $('#object_subcategory_id').html()
  $('#object_category').change ->
    category = $('#object_category :selected').text()
    escaped_category = category.replace(/([ #;&,.+*~':"!^$[]()=>|/@])/g, '\$1')
    options = $(subcategories).filter("optgroup[label='#{escaped_category}']").html()
    if options
      $('#object_subcategory_id').html(options)
      $('.subcategory_label_class').show()
      $('#object_subcategory_id').parent().show()
    else
      $('#object_subcategory_id').empty()
      $('.subcategory_label_class').hide()
      $('#object_subcategory_id').parent().hide()

您可以根据需要调整此示例。

我希望它有所帮助。

问候！

Answer 2

你需要构建一个单独的控制器并在触发更改事件时发送 ajax 请求，控制器发回一个 js 响应，你必须在客户端 JavaScript 中处理......以下链接应为您提供一个示例 http://blog.bernatfarrero.com/jquery-and-rails-3-mini-tutorial/