Ruby on Rails: collection_select - отображать что-то, кроме текста

Question

On Rails 4. Я создаю сайт, на котором вы можете искать графику/продукты в соответствии с назначенной цветовой схемой. Соответствующие модели:

class Product < ActiveRecord::Base 
    belongs_to :color_scheme 
end 

class ColorScheme < ActiveRecord::Base 
    has_many :products 
end 

Каждая цветовая схема имеет пять шестнадцатеричных значений цвета в виде столбцов. Использование Bootstrap, вот что код выглядит как выпадающее меню, не будучи collection_select:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
    data-toggle="dropdown" aria-expanded="true" style="width:100%; margin-bottom:20px;"> 
    <%= t('template.scheme')%> <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <% @color_schemes.where(enabled: true).each do |scheme| %> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> 
     <div style="width:30px; height: 20px; display: inline-block; 
      background-color:#<%=scheme.color1%>;"></div> 
     <div style="width:30px; height: 20px; display: inline-block; 
      background-color:#<%=scheme.color2%>;"></div> 
     <div style="width:30px; height: 20px; display: inline-block; 
      background-color:#<%=scheme.color3%>;"></div> 
     <div style="width:30px; height: 20px; display: inline-block; 
      background-color:#<%=scheme.color4%>;"></div> 
     <div style="width:30px; height: 20px; display: inline-block; 
      background-color:#<%=scheme.color5%>;"></div> 
     </li> 
    <% end %> 
    </ul> 
</div> 

И это визуальный результат:

Поскольку я использую Ransack и это выпадающий список для поиска, я преобразовал это в collection_select, но не могу понять, как получить тот же визуальный эффект.

<%= f.collection_select :color_scheme_id_eq, ColorScheme.order('created_at DESC').all, :id, 
    :name, {include_blank: t('template.scheme')}, {class: 'form-control select-scheme', 
    style: 'width:100%; margin-bottom:20px;'} %> 

Таким образом, вместо того, чтобы просто отображать имя текста цветовой схемы, я хотел бы показать цвета, как и выше. Я понимаю, что это, вероятно, выходит за рамки выбора коллекции, но я чувствую, что цвета имеют больше смысла, визуально, чем имя. Возможно ли это, либо через collection_select, либо какой-либо другой тег, который будет работать с Ransack? Благодаря! Изменить: Я хотел бы также добавить, что я, вероятно, до сих пор название цветовой схемы на право цвета, для людей, которые дальтонизм и т.д.

Answer 1

У меня есть другое предложение:

• создать DIV, который имеет цветовую схему выше поле выбора
• затем использовать для событий JavaScript нажмите на каждую цветовую схему, чтобы установить значение в поле выбора

Вот мой пример кода, чтобы решить эту проблему:

.col-sm-3 
    #color-label-project{style: 'text-align: center;'} 
    - t('labels.project.label_color_hashes').map do |k, v| 
     %span{style: "width:30px; height: 20px; display: inline-block; background-color: #{v};", id: "#{k}", 'data-value': "#{k}"} 
    = f.input :label_color, collection: Project::LABEL_COLOR_NAME, prompt: true, disabled: false, label: false 

:javascript 
    $("#color-label-project span").bind('click', function(){ 
     $('select[name="project[label_color]"]').val($(this).data("value")); 
    }) 

вот мой путь: