使用Rails，Ajax和Jquery基於下拉菜單更改內容

Question

我想根據從collection_select下拉列表中的選擇，從數據庫中顯示最近的分數。我知道我需要聽取下拉菜單上的更改事件，但我不知道如何執行AJAX請求或如何在視圖中顯示數據。

Answer 1

好吧，我會用category和subcategory模型寫一個例子。

首先是車型之間的關係：與simple_form gem（你可以用form_for做）

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_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 %> 

有了這個，我們分組的子類別與他們的父類別。

下一步必須將代碼添加到您的objects.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/