前の選択に基づいて次の選択ボックスを表示する

Question

<%= f.collection_select :category, Category.all, :id, :name, {prompt: true}  
<%= f.collection_select :sub_category, SubCategory.all, :id, :name, {prompt: true} %> 

カテゴリの選択に基づいてカテゴリ固有のサブカテゴリのみを表示したい。 jqueryを使ってレール上のルビーでこれを達成する方法。

Answer 1

onChange機能を追加する必要があります。

<%= f.collection_select :category, Category.all, :id, :name, {prompt: true}, {onchange: "getSubCategory();"} %> 
<%= f.collection_select :sub_category, {}, {prompt: true} %> 

は、あなたがルートや行動だけでなく

Route

resources(:categories) do 
    collection do 
    get(':category_id/get_sub_categories', action: :get_sub_categories) 
    end 
end 

categories_controller.rb

を追加する必要があります application.js

function getSubCategory() { 
    var currentCategory = $('#category :selected').val(); 
    $.ajax({ 
    url: '/categories/'+ currentCategory +'/get_sub_categories', 
    dataType: "json", 
    success: function(data) { 
     $('#sub_category').html(''); 
     for (i in data.sub_categories) { 
     var sub_category = data.sub_categories[i]; 
     if (sub_category != undefined) { 
      $('#sub_category').append("<option value=\""+sub_category.id+"\">"+sub_category.name+"</option>"); 
     } 
     } 
    } 
});  
} 

にこの機能を追加します

def get_sub_categories 
    if params[:category_id] 
    category = Category.find(params[:category_id]) 
    # Assuming you have one-to-many relationship between category and sub_categories. 
    sub_categories = category.sub_categories 
    render json: {sub_categories: sub_categories} 
    end 
end 

希望すると、これが役立ちます！

Answer 2

はい可能です。カテゴリに変更イベントをドロップダウンあなたはJS要求し、

$("#category_id").change(function(){ 
    var category_id = $('#category_id').val() 
    url = "/some_url?category_id=" + category_id 
    $.get(url, function(data) { 
    var set_sub_category; 
    set_sub_category = $("#sub_category_id"); 
    set_sub_category.empty(); 
    opt = $("<option/>"); 
    opt.attr("value", ""); 
    opt.appendTo(set_sub_category); 
    opt.text("---Select Sub Categories---"); 
    $.each(data, function(index, value) { 
     var opt; 
     opt = $("<option/>"); 
     opt.attr("value", value[1]); 
     opt.text(value[0]); 
     opt.appendTo(set_sub_category); 
    }); 
    }); 
}); 

コントローラールックはSO

def some_url 
    @data = [] 
    @category = Category.find_by(id: params[:category_id]) 
    if @category 
    @data = @category.sub_categories.map{|b| [b.name,b.id]} 
    end 
    render json: @data 
end