ruby-on-rails - Ruby on Rails：collection_select - 显示文本以外的内容

Question

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

这是我的方式：