Ruby on Rails: collection_select - display something other than text

Question

On Rails 4. I am building a site where you can search graphics/products according to their assigned color scheme. Relevant models:

class Product < ActiveRecord::Base 
  belongs_to :color_scheme
end

class ColorScheme < ActiveRecord::Base 
  has_many :products
end

Each color scheme has five color hexadecimal values as columns. Using Bootstrap, here's what the code looks like as a dropdown, without being a 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>

And this is the visual result:

Since I'm using Ransack and this is a dropdown for search, I converted this into a collection_select but can't figure out how to get that same visual effect.

<%= 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;'} %>

So instead of just displaying the color scheme's text name, I'd like to show the colors like above. I understand this is probably outside the scope of what a collection select should be, but I feel the colors make more sense, visually, than the name. Is this possible, either through collection_select or some other tag that would work with Ransack? Thanks! Edit: I should also add that I'll probably still have the color scheme's name to the right of the colors, for people who are color-blind, etc.

score 1 · Answer 1 · answered Apr 19 '16 at 02:05

I have another suggestion:

create a div which has color scheme above select field
then use to javascript click event on each color scheme to set value in select field

Here is my code sample to solve this issue:

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

here is my way:

I'll take a look at this tonight and will accept it as the answer if this works. This looks great, although I will need to think carefully as this form was also supposed to be on one line. Perhaps I could shift things around or move the div to the left or right to the select. Thank you so much for your help. — Rachel9494, Apr 19 '16 at 13:31

Ruby on Rails: collection_select - display something other than text

1 Answers1