Class Ember.Select

Extends: Ember.View
Defined in: packages/ember-handlebars/lib/controls/select.js:78
Module: ember

The Ember.Select view class renders a select HTML element, allowing the user to choose from a list of options.

The text and value property of each <option> element within the <select> element are populated from the objects in the Element.Select's content property. The underlying data object of the selected <option> is stored in the Element.Select's value property.

content as an array of Strings

The simplest version of an Ember.Select takes an array of strings as its content property. The string will be used as both the value property and the inner text of each <option> element inside the rendered <select>.

Example:

1
2
3

App.ApplicationController = Ember.Controller.extend({
  names: ["Yehuda", "Tom"]
});
 
1

{{view Ember.Select contentBinding="names"}}

Would result in the following HTML:

1
2
3
4

<select class="ember-select">
  <option value="Yehuda">Yehuda</option>
  <option value="Tom">Tom</option>
</select>

You can control which <option> is selected through the Ember.Select's value property directly or as a binding:

1
2
3
4

App.ApplicationController = Ember.Controller.extend({
  selectedName: 'Tom',
  names: ["Yehuda", "Tom"]
});
 
1
2
3
4

{{view Ember.Select
       contentBinding="names"
       valueBinding="selectedName"
}}

Would result in the following HTML with the <option> for 'Tom' selected:

1
2
3
4

<select class="ember-select">
  <option value="Yehuda">Yehuda</option>
  <option value="Tom" selected="selected">Tom</option>
</select>

A user interacting with the rendered <select> to choose "Yehuda" would update the value of selectedName to "Yehuda".

content as an Array of Objects

An Ember.Select can also take an array of JavaScript or Ember objects as its content property.

When using objects you need to tell the Ember.Select which property should be accessed on each object to supply the value attribute of the <option> and which property should be used to supply the element text.

The optionValuePath option is used to specify the path on each object to the desired property for the value attribute. The optionLabelPath specifies the path on each object to the desired property for the element's text. Both paths must reference each object itself as content:

1
2
3
4
5
6

App.ApplicationController = Ember.Controller.extend({
  programmers: [
    {firstName: "Yehuda", id: 1},
    {firstName: "Tom",    id: 2}
  ]
});
 
1
2
3
4

{{view Ember.Select
       contentBinding="programmers"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"}}

Would result in the following HTML:

1
2
3
4

<select class="ember-select">
  <option value="1">Yehuda</option>
  <option value="2">Tom</option>
</select>

The value attribute of the selected <option> within an Ember.Select can be bound to a property on another object by providing a valueBinding option:

1
2
3
4
5
6
7
8
9

App.ApplicationController = Ember.Controller.extend({
  programmers: [
    {firstName: "Yehuda", id: 1},
    {firstName: "Tom",    id: 2}
  ],
  currentProgrammer: {
    id: 2
  }
});
 
1
2
3
4
5

{{view Ember.Select
       contentBinding="programmers"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       valueBinding="currentProgrammer.id"}}

Would result in the following HTML with a selected option:

1
2
3
4

<select class="ember-select">
  <option value="1">Yehuda</option>
  <option value="2" selected="selected">Tom</option>
</select>

Interacting with the rendered element by selecting the first option ('Yehuda') will update the id of currentProgrammer to match the value property of the newly selected <option>.

Alternatively, you can control selection through the underlying objects used to render each object providing a selectionBinding. When the selected <option> is changed, the property path provided to selectionBinding will be updated to match the content object of the rendered <option> element:

1
2
3
4
5
6
7

App.ApplicationController = Ember.Controller.extend({
  selectedPerson: null,
  programmers: [
    {firstName: "Yehuda", id: 1},
    {firstName: "Tom",    id: 2}
  ]
});
 
1
2
3
4
5

{{view Ember.Select
       contentBinding="programmers"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="selectedPerson"}}

Would result in the following HTML with a selected option:

1
2
3
4

<select class="ember-select">
  <option value="1">Yehuda</option>
  <option value="2" selected="selected">Tom</option>
</select>

Interacting with the rendered element by selecting the first option ('Yehuda') will update the selectedPerson to match the object of the newly selected <option>. In this case it is the first object in the programmers

Supplying a Prompt

A null value for the Ember.Select's value or selection property results in there being no <option> with a selected attribute:

1
2
3
4
5
6
7

App.ApplicationController = Ember.Controller.extend({
  selectedProgrammer: null,
  programmers: [
    "Yehuda",
    "Tom"
  ]
});
 
1
2
3
4

{{view Ember.Select
       contentBinding="programmers"
       valueBinding="selectedProgrammer"
}}

Would result in the following HTML:

1
2
3
4

<select class="ember-select">
  <option value="Yehuda">Yehuda</option>
  <option value="Tom">Tom</option>
</select>

Although selectedProgrammer is null and no <option> has a selected attribute the rendered HTML will display the first item as though it were selected. You can supply a string value for the Ember.Select to display when there is no selection with the prompt option:

1
2
3
4
5
6
7

App.ApplicationController = Ember.Controller.extend({
  selectedProgrammer: null,
  programmers: [
    "Yehuda",
    "Tom"
  ]
});
 
1
2
3
4
5

{{view Ember.Select
       contentBinding="programmers"
       valueBinding="selectedProgrammer"
       prompt="Please select a name"
}}

Would result in the following HTML:

1
2
3
4
5

<select class="ember-select">
  <option>Please select a name</option>
  <option value="Yehuda">Yehuda</option>
  <option value="Tom">Tom</option>
</select>

Show: