-
-
Notifications
You must be signed in to change notification settings - Fork 72
Select Tag
To build your <select>
tags inside forms, Tags provides 3 convenient ways to add your <select>
options:
form.SelectOptions
map[string]interface{}
[]string
[]map[string]interface{}
all of them by passing an options
field into the form.SelectTag
options like:
<%= f.SelectTag({name: "TalkFormatID", options: talkFormats}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID", {options: talkFormats}) %>
or
<%= f.SelectTag({name: "TalkFormatID", options: ["one", "two"]}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID", {options: ["one", "two"]}) %>
Which will use the same value for the value
attribute and the body of the option, or:
<%= f.SelectTag({name: "TalkFormatID",options: {"one": 1, "two": 2}}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID",{options: {"one": 1, "two": 2}}) %>
Which (given the Plush power) allows us to define the options map inside the view.
Sometimes you want to preserve the order of your options, one option is to pass a list of maps in the options map, in that case for each map tags will use the first key/value as the options value/label. for example:
<%= f.SelectTag({name: "Language", options: [{"None": 1},{"Arabic": 6145},{"Chinese": 2052},{"English": 2057}, {"French": 1036},{"German": 1031}, {"Hindi": 1081}, {"Japanese": 1041}, {"Portuguese": 2070}, {"Russian": 1049}, {"Spanish": 1034}]}) %>
//Or with form_for
<%= f.SelectTag("Language", { {"None": 1},{"Arabic": 6145},{"Chinese": 2052},{"English": 2057}, {"French": 1036},{"German": 1031}, {"Hindi": 1081}, {"Japanese": 1041}, {"Portuguese": 2070}, {"Russian": 1049}, {"Spanish": 1034}]}) %>
Another alternative for the select options is to pass a list of structs that meet the form.Selectable
interface.
Which consist of two functions:
//Selectable allows any struct to become an option in the select tag.
type Selectable interface {
SelectValue() interface{}
SelectLabel() string
}
By implementing this interface tags will call SelectValue
and SelectLabel
to get the option Value and Label from implementer.
This interface is also known by the value
attribute:
<%= f.SelectTag({name: "Talk", value: myTalk, options: selectableTalksList}) %>
//Or with form_for
<%= f.SelectTag("Talk",{value: myTalk, options: selectableTalksList}) %>
Tags will add the selected
attribute to the option that has the same value than the one it receives on the value
option of the form.SelectTag
, so you don't have to look for the option that has equal value than the selected one manually, p.e:
<%= f.SelectTag({name: "TalkFormatID", options: {"one": 1, "two": 2}, value: 2}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID",{options: {"one": 1, "two": 2},value: 2}) %>
Produces:
<div class="form-group">
<label>TalkFormatID</label>
<select class="form-control" id="talk-TalkFormatID" name="TalkFormatID">
<option value="1">one</option>
<option value="2" selected>two</option>
</select>
</div>
And similarly with the form.SelectOptions
slice:
<%= f.SelectTag({name: "TalkFormatID", options: talkFormats, value: 2}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID",{options: talkFormats, value: 2}) %>
The multiple
option allows you to handle <select multiple>
tags.
<%= f.SelectTag({name: "TalkFormatID", options: [1, 2, 3], value: 2, multiple: true}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID",{options: [1, 2, 3], value: 2, multiple: true}) %>
gives:
<select multiple name="TalkFormatID">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
To select more than one value:
<%= f.SelectTag({name: "TalkFormatID", options: [1, 2, 3], value: [1, 3], multiple: true}) %>
//Or with form_for
<%= f.SelectTag("TalkFormatID",{ options: [1, 2, 3], value: [1, 3], multiple: true}) %>
gives:
<select multiple name="TalkFormatID">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
The multiple
option is compatible with the Selectable
interface, so if you provide a list of Selectable
objects, it works the same way.