How do I add HTML attributes to select options with Simple Form Rails?

Question

I need to add a custom HTML attribute to each option for a select control. I'm using simple_form in Rails. Does anyone know how to do this? The attribute will be consumed by client-side JS.

For instance, I want to do something like this:

<%= f.input :group, collection: @groups, option_html: { data-type: lambda { |g| g[2] } } %>

Which would produce (simplified):

<select>
    <option value="1" data-type="primary">First Group</option>
    <option value="2" data-type="secondary">Second Group</option>
    <option value="3" data-type="secondary">Third Group</option>
</select>

Where @groups might look like this:

[
    ['First Group', 1, 'primary'],
    ['Second Group', 2, 'secondary'],
    ['Third Group', 3, 'secondary']
]

Hoping to avoid having to make a custom control/wrapper. Thanks!

http://stackoverflow.com/a/27975639/1536309 – Blair Anderson Jan 11 '17 at 02:08 — Blair Anderson, Jan 11 '17 at 02:08

Blair Anderson · Answer 1 · 2017-01-12T03:21:36.603

You're close! easiest way is actually not using simple_form here. here's the simple_form documentation

<% options = @group.map { |g| [g.name, g.id, {'data-type' => g.group_type}] } %>
<%= f.input :group, label: 'Group' do %>
  <%= f.select :group, options, include_blank: 'Select a Group', class: 'form-control' %>
<% end %>

For your exact code it would be:

<% options = @group.map { |g| [g[0], g[1], {'data-type' => g[2]}] } %>
<%= f.input :group, label: 'Group' do %>
  <%= f.select :group, options, include_blank: 'Select a Group', class: 'form-control' %>
<% end %>

score 22 · Answer 2 · answered Feb 03 '18 at 11:41

22

simple-form only:

= f.input :group, @groups.map{|l| [l[0], l[1], {data: {type: l[2]}}]}

answered Feb 03 '18 at 11:41

Bruno Porto

366
2
4

1

Works perfectly! This should be the correct answer. – Fernando Kosh Feb 25 '19 at 23:18
1

Thank you very much, I was looking for this!! should be correct answer :) – Qubis741 Jun 13 '19 at 10:24

Markus · Answer 3 · 2016-01-16T14:34:25.910

A (small) drawback using f.input do end method is that any default input html options (like simple form's required or optional classes or the required attribute) and any default options (like b.use :input, class: 'input-element') are missing when simply passing a block to f.input, tldr: the input does not get decorated.

If you rely on these extra classes and attributes, you'd have to manually pass them in (not dry).

To overcome this I've created a custom input for my special selects, so I can define the body of my select like I want (the <option> tags) but the select gets decorated as usual:

# app/inputs/select_container_input.rb
class SelectContainerInput < SimpleForm::Inputs::Base 
  def input(wrapper_options)
    options_html = input_options.delete(:options_html)

    # since we pass our options by our self (and have to select the correct
    # option), set `selected` to `''` to prevent rails calling
    # `object.send(attribute_name)` only to set `selected` which is not used.
    input_options[:selected] = ''    

    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
    @builder.select attribute_name, nil, input_options, merged_input_options do
      options_html
    end
  end
end

Simply call it like this:

<% options_html = capture do %>
  <option>bla</option>
<% end %>
<%= f.input :attribute, as: :select_container, options_html: options_html %>

The options_html is a workaround, because actually it would be easier to pass in a block to our custom input:

<%= f.input :attribute, as: :select_container do %>
  <option>bla</option>
<% end %>

But due to the way SimpleForm::FormBuilder#def_input works, the block gets carried away before code even touches the inputs. So no way without refactoring simple_form.

All in all this solves the problem with a little bit extra noisy code in your views for your special selects.

score 1 · Answer 4 · answered Oct 12 '19 at 10:29

1

For an association select:

f.association :product, collection: Product.all.map { |product| [product.name, product.id] }

answered Oct 12 '19 at 10:29

Joshua Muheim

12,617
9
76
152

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

This seems to be the correct way of doing this:

Rails Simple Form custom association select field

edited May 23 '17 at 12:02

Community

1
1

answered Jul 09 '13 at 18:17

YWCA Hello

2,997
4
29
40

2

The posted link says how to customize the – Guillermo Siliceo Trueba Dec 07 '14 at 14:42

How do I add HTML attributes to select options with Simple Form Rails?

5 Answers5

Linked