Skip to content

Select Tag

Antonio Pagano edited this page Apr 19, 2018 · 7 revisions

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}]}) %>

Selectable Interface

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}) %>

Selected

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}) %>

Select multiple (since v1.9.0)

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.