f.select에서 다중 선택을 구현하는 방법은 무엇입니까?

Question

는 이전에 나는

<%= f.select(:TYPE, Category.all.collect {|p| [ p.name, p.id ] }, 
             { :prompt => "Please select"}, 
             { :multiple => true, :size => 5 }) %> 

를 사용하여, f.select에서 다중 선택을 만들었으며 그것을 잘 작동합니다.

이제 카테고리에는 자체 하위 항목이 있으며 해당 카테고리에 대해 하위 항목을 선택해야합니다. 구현에 최선을 다했지만 성공하지 못했습니다.

@category = Category.all.collect {|p| [ p.name, p.id ] } 
@subcategory = Category.first.subcategories.collect {|p| [ p.name, p.id ] } 

세 개의 블록이 필요합니다. 먼저 하위 카테고리에는 두 번째 카테고리가 있고 하위 카테고리에는 마지막으로 선택됩니다.

누구든지 나를 도와 주시면 감사하겠습니다.

Answer 1

같은 형태로 모양의 select 태그 :

<%= select_tag "categories", options_for_select(@allcategories, @allcategories.first) %> 

<div id="multiselect-subcat"> 
    <%= render :partial => 'subcategories' %> 
</div> 

은 하위 범주의 변화를 처리 할 수 ​​

get 'fetch_subcategories' 


def fetch_subcategories 
    @story = Story.new 
    @subcategories = Category.where(parent_id: params[:category_id]) 
    render :partial => "subcategories", :locals => { :subcategories => @subcategories } 
    end 

를 가져 경로를 추가 부분 _subcategories.html.erb

<%= form_for @story, :html => {:class => 'form-horizontal'} do |f| %> 

<%= f.select(:category_ids, @subcategories.collect { |c| [c.name, c.id] }, 
           {:include_hidden => false}, 
           {:class => 'multi-select', :multiple => true}) %> 

<% end %> 

추가 카테고리의 이벤트, 즉 카테고리가 변경 될 때 서브 카테고리를 채우기

<script> 
     jQuery(document).ready(function() { 
      $('#story_category_ids').multiSelect(); 
     }); 


     jQuery(function($) { 
      $("#categories").change(function() { 
      var category = $('select#categories :selected').val(); 

      if(category == "") category="0"; 

      jQuery.get('/stories/fetch_subcategories?category_id=' + category, function(data){ 
       $("#multiselect-subcat").html(data); 
       $('#story_category_ids').multiSelect(); 
      }) 
      return false; 
      }); 
     }) 


    </script>