-
-
Notifications
You must be signed in to change notification settings - Fork 71
Select Tag
To build your <select> tags inside forms, Tags provides 3 convenient ways to add your <select> options:
form.SelectOptionsmap[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.