Adding extra HTML to select options

[AJFaraday]

I can't see a way to do this, with extensive googling and a look through the simple_form code base. Perhaps I'm missing something. I want a select field, with an extra 'data-' attribute in the options. I can do it, but only at the expense of losing a separate value field.

The data I'm trying to present:

[
  ['name a', 123, {'data-description': 'foo'}],
  ['name b', 321, {'data-description': 'bar'}]
]

---

Case 1:

<%= form.input :relation_id,  collection: relation_options, include_blank: false %>

This presents options with the first option as both the visible option and the value attribute. It does, however, include the description on them both.

---

Case 2:

<%= form.input :relation_id,  collection: relation_options, value_method: :second, include_blank: false %>

This presents the numeric id as the value attribute for the options, but the data attribute has disappeared.

---

case 3:

[
  ['name a', 123, {value: 123, 'data-description': 'foo'}],
  ['name b', 321, {value: 321, 'data-description': 'bar'}]
]

Exactly the same result as case 1, the value attribute is the name field.

This might be a feature request, or just a request for help using the library. Is there any way to define my own attributes, and add extra html attributes to the options?

[feliperenan]

Hi @AJFaraday, thanks for the issue. This would be a feature request.

Simple Form uses just the first and second item from each item from the given array. In this case, you only can choose the item that will be the label and/or the value using the options label_method and value_method. Like you did in the case 2.

https://github.com/plataformatec/simple_form#collections

More info in the code:
https://github.com/plataformatec/simple_form/blob/67d8df4768f7b5759502df6f0bae8160b6556d0c/lib/simple_form/inputs/collection_input.rb#L62

I'm not sure how we could handle that. Could we consider that items from the third position are HTML attributes? 🤔

cc @rafaelfranca @tegon

[AJFaraday]

Hi @feliperenan

Thanks for getting back to me!

It's a while since I was looking into this. I wound up dropping back to the rails form helpers and wrapping it in an input call with a block.

There was another use-case for this recently, when I was selecting from a list of named CSS colors, and adding a style attribute to each <select> tag to display the color.

[sshaw]

#188 (comment)

[nashby]

Closing this since it's possible to pass html options to every select's option. See a test case for this here

[minimul]

@nashby I didn't get that to work for whatever reason. Here is an alternate way to still use Simple Form wrapping in conjunction with the Rails select helper to achieve this:

<%= l.input :color_thickness, label: 'Type' do %>    
  <%= l.select :color_thickness, options_for_select([['Blue 3/4"', {'data-price': 0.33} ], ['Blue 1"', {'data-price': 0.43 }]]), { include_blank: true }, { class: "form-control select optional width-100" }  %>                                                                         
<% end %>