如何在 f.select 中实现多选？答案

【问题标题】：How to implement multiple selection in f.select?如何在 f.select 中实现多选？
【发布时间】：2015-02-05 23:35:40
【问题描述】：

之前我在 f.select 中创建了多项选择，使用

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

而且效果很好。

现在类别有自己的孩子，需要为给定类别选择孩子。我尽了最大的努力去实现，但没有成功。

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

我需要 3 个块，第一个用于类别，第二个用于子类别，最后一个用于选定的子类别。

如果有人帮助我，我将不胜感激。

【问题讨论】：

标签： jquery ruby-on-rails forms jquery-ui

【解决方案1】：

表单中的选择标签如下所示：

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

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

添加部分 _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 %>

添加路由以获取子类别

get 'fetch_subcategories'


 def fetch_subcategories
    @story = Story.new
    @subcategories = Category.where(parent_id: params[:category_id])
    render :partial => "subcategories", :locals => { :subcategories => @subcategories }
  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>

【讨论】：