jquery select下拉选项框二级联动 rails后台

动态分类联动

最新推荐文章于 2024-12-03 11:08:13 发布

最新推荐文章于 2024-12-03 11:08:13 发布 · 187 阅读

文章标签：

#jQuery #Rails #Ajax #ActiveRecord #ViewUI

rails 配置专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Rails模型关联实现的动态分类联动方案。通过Category和Subcategory两个模型之间的多对一关联，配合jQuery实现了主分类变化时子分类的动态加载。具体来说，在视图中通过collection_select生成下拉菜单，并利用Ajax请求控制器方法来动态获取子分类。

当选择大分类的时候小分类跟着改变

model

class Category < ActiveRecord::Base
has_many :subcategories
end

class Subcategory < ActiveRecord::Base
belongs_to :category
end

view

<%= collection_select(:usedbook,:name,@categories,:id,:name) %>
<span id="next_select"> <%= collection_select(:usedbook,:subcategory_id,@subcategories,:id,:name) %> </span>

<%= select(:usedbook, :subcategory_id, @subcategories) %>

控制器

def select_with_ajax
    @subcategories=Subcategory.all(:conditions => ["category_id=?",params[:category_id]]).collect{|subcategory|
                                                 [subcategory.name,subcategory.id]}
    render(:layout=>false)
end

Jquery

$('#usedbook_name').change(function(){

           v =$(this).val();
           $("#next_select").hide();

           $('#next_select').load("select_with_ajax",{category_id:v}).show();
          });