Wednesday, November 21, 2007

Using select_tag to make a form select field

I had a difficult time trying to find documentation on how to use the select_tag method to generate a form select box, so I'll post here what I've discovered for how to use it. Here are the parameters:

<%= select_tag "name",
"select options",
html_options = {} %>

name is the id and name of the select tag. Select options can be any text, this will appear in between the <select> and </select>. However, for this to mean anything you'll want it to contain option tags. The options_for_select helper generates this for you. See the details of this in the next paragraph.

html_options is a standard hash of additional options to specify on the select tag (class, event handlers, etc.). Specifying a size will allow you to make the select element scrollable with each option in a row. If no size is specified, it is displayed as a drop-down list. The other unique option here is :multiple. Setting this to true will allow the user to select multiple options. If mulitple is set to true, the size defaults to the number of options. By default, multiple is false.

Now, back to options_for_select. The syntax is:

array_of_selected_values = [])

array_of_options is an array containing the selectable options. Each element of the array can either be a string or another array. If it's a string, an option is generated whose value and displayed text are the same. Example - "1" would generate <option value="1">1</option>. If the element is an array, it must be a two element array, with the first element of this array being the text to display, and the second element being the value of the option. Example = ["value 1", "1"] would generate <option value="1">value 1</option>.

array_of_selected_values is an array containing all values that you want to be selected when the page loads, if multiple selection is allowed (see html_options). Each element should contain the option value to be selected, not the text displayed.

So, let me give an example. The Rails ERb

<%= select_tag "test",
options_for_select([["value 1", "1"],
["value 2", "2"], "3", "4"],
["1", "3"]), {:multiple => true} %>

generates the following HTML:

<select id="test" multiple="multiple" name="test">
<option value="1" selected="selected">value 1</option>
<option value="2">value 2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option></select>

This will generate a selection box 4 rows long, with 1 and 3 selected.

Note that you can also put integers as option values. However, if you do, the selected options must also be integers. If you have an option with a value of 1 (integer), but put "1" in the selected options array, option value 1 will not be selected.


Tobias said...

Great! Many thanks! I was looking for an article that was clarifying the use of the select_tag but couldn´t find a useful resource.

Tim Rosenblatt said...

Hey Brent,

Thanks for this post. I was having trouble since the official documentation says to supply a string of option tags, rather than an array of options.

Keep on posting helpful hints! :)

Brent said...

That is pretty surprising that the API documentation shows an actual string passed in. I don't know of a case where you would pass a literal string instead of using options_for_select.

nidhigupta said...

Thanks Brent. But i needed to call an action inside controller on chang of the dropdown value. Can you please help me in that?

Anonymous said...

This comment has been removed by a blog administrator.

Drummond said...

so now that you've made the form, how do you use the return output? i.e. assign the output to an object? thanks for your help.