Table of Contents
I’ve compiled a guide on generating options
tags using options_for_select
.
Environment
- Ruby 2.2.3
- Rails 4.2.5
options_for_select
This method generates option
tags from arrays or hashes. Even without knowing options_from_collection_for_select
, you can create option
tags with this.
Basics
When passing a simple array, the array elements become the option values.
1 2 3 |
options_for_select([ "VISA", "MasterCard" ]) # => <option>VISA</option> # => <option>MasterCard</option> |
You can set an initial value by passing the selected value as the second argument.
1 2 3 |
options_for_select([ "VISA", "MasterCard" ], "MasterCard") # => <option>VISA</option> # => <option selected="selected">MasterCard</option> |
To select multiple values, pass an array of selected values.
1 2 3 4 |
options_for_select([ "VISA", "MasterCard", "Discover" ], ["VISA", "Discover"]) # => <option selected="selected">VISA</option> # => <option>MasterCard</option> # => <option selected="selected">Discover</option> |
Separating Value and Display
When setting the value
attribute of each option
tag separately, use arrays or hashes to pass the value and display name. For arrays, place the display name in the first element and the value in the second. For hashes, set the display name as the key and the value as the value.
To set a selected option, use the same method as before, passing the value(s) in the second argument.
1 2 3 4 5 6 7 |
options_for_select([["Dollar", "$"], ["Kroner", "DKK"]]) # => <option value="$">Dollar</option> # => <option value="DKK">Kroner</option> options_for_select({ "Basic" => "$20", "Plus" => "$40" }, "$40") # => <option value="$20">Basic</option> # => <option value="$40" selected="selected">Plus</option> |
Adding HTML Attributes
To add HTML attributes, insert a hash into each option element in the array.
1 2 3 4 5 6 7 8 |
options_for_select([ "Denmark", ["USA", {class: 'bold'}], "Sweden" ], ["USA", "Sweden"]) # => <option value="Denmark">Denmark</option> # => <option value="USA" class="bold" selected="selected">USA</option> # => <option value="Sweden" selected="selected">Sweden</option> options_for_select([["Dollar", "$", {class: "bold"}], ["Kroner", "DKK", {onclick: "alert('HI');"}]]) # => <option value="$" class="bold">Dollar</option> # => <option value="DKK" onclick="alert('HI');">Kroner</option> |
While there may be ways to pass options using hashes, the official API documentation states arrays, so we use arrays. These HTML attributes are extracted from the array using option_html_attributes
.
1 2 3 4 5 6 7 |
def option_html_attributes(element) if Array === element element.select { |e| Hash === e }.reduce({}, :merge!) else {} end end |
If you pass ["a", ["b", "c"]]
as the first argument, element
will receive "a"
and ["b", "c"]
. If you pass {a: 1, b: 2}
as a hash, element
will receive ["a", 1]
and ["b", 2]
.
Specifying Unavailable Options
Similar to setting an initial value, here we set the disabled
value in a hash to specify options that should be disabled.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], disabled: "Super Platinum") # => <option value="Free">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], disabled: ["Advanced", "Super Platinum"]) # => <option value="Free">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced" disabled="disabled">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], selected: "Free", disabled: "Super Platinum") # => <option value="Free" selected="selected">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> |
The last argument can only be selected
or disabled
. This final argument is processed by extract_selected_and_disabled
inside options_for_select
.
1 2 3 |
selected, disabled = extract_selected_and_disabled(selected).map do |r| Array(r).map { |item| item.to_s } end |