我想根据从collection_select下拉列表中的选择,从数据库中显示最近的分数。我知道我需要听取下拉菜单上的更改事件,但我不知道如何执行AJAX请求或如何在视图中显示数据。使用Rails,Ajax和Jquery基于下拉菜单更改内容
0
A
回答
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()
可以适应这个例子您的需求。
我希望它有帮助。
问候!
2
你需要建立一个单独的控制器,并在你的更改事件被触发时发送ajax请求,控制器发回一个js响应,你必须在你的客户端处理javascript ...以下链接应该给你一个示例http://blog.bernatfarrero.com/jquery-and-rails-3-mini-tutorial/
相关问题
- 1. jQuery通过AJAX更改下拉菜单
- 2. 基于jQuery下拉菜单
- 3. 更改下拉菜单上的内容
- 4. 使用下拉菜单更改div的内容,JavaScript和PHP
- 5. 使用下拉菜单更改两个不同Div的内容
- 6. 使用javascript在下拉菜单中更改内容
- 7. 下拉菜单内容比下拉菜单更宽
- 8. 语言改变基于下拉菜单
- 9. jquery下拉菜单,邻居内容
- 10. Ajax下拉选择更改TextArea内容
- 11. 使用jQuery和javascript在下拉菜单中更改选定值
- 12. JQuery AJAX和autopopulate下拉菜单
- 13. 使用php和ajax下拉菜单
- 14. 使用ajax和css下拉菜单
- 15. 使用PHP和jQuery从下拉菜单中选择日期后更新内容
- 16. 下拉菜单的CSS扩展基于内容
- 17. 基于MySQL表的内容的引导下拉菜单
- 18. 如果使用JQuery和AJAX后在表单中选择另一个下拉菜单,则更改下拉值
- 19. 使用下拉菜单更改图像
- 20. 用下拉菜单调用jquery ajax()?
- 21. 使基于一个下拉菜单
- 22. 使用jquery下拉菜单
- 23. Drupal 7 - 如何使用AJAX更改多个下拉菜单?
- 24. 更改下拉菜单
- 25. JAVA - 基于另一个下拉菜单下拉菜单项
- 26. jQuery - 在'draggable div'下拉菜单中改变'正常div'内容
- 27. 下拉菜单基于之前的JQuery选择器下拉菜单出现
- 28. 基于两个下拉菜单输出文本更改
- 29. 更改图像基于选择在2个下拉菜单
- 30. 在下拉菜单中更改内容打开选择