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"));
  })

这是我的方式：