When the collection changes, the view will try and maintain its currently .value. If the corresponding model is removed, the control will default to the 0th index and update its value accordingly.

custom template

You may override the default template by providing your own template string to the constructor options hash. Technically, all you must provided is a element. However, your template may include the following under a single root element:
1. An element with a data-hook="label" to annotate your select control
2. An element to hold your options
3. An element with a data-hook="message-container" to contain validation messages
4. An element with a data-hook="message-text" nested beneath the data-hook="message-container" element to show validation messages

Here's the default template for reference:

`html








You may SelectView.extend({ template: ...}) to create a View definition with a more permanent default template of your liking as well.

example

`javascript
var FormView = require('ampersand-form-view');
var SelectView = require('ampersand-select-view');

module.exports = FormView.extend({
fields: function () {
return [
new SelectView({
label: 'Pick a color!',
// actual field name
name: 'color',
parent: this,
// you can pass simple string options
options: ['blue', 'orange', 'red'],
// if included this will add option for an unselected state
unselectedText: 'please choose one',
// you can specify that they have to pick one
required: true,
// specify tab index for usability
tabindex: 1,
}),
new SelectView({
name: 'option',
parent: this,
// you can also pass array, first is the value, second is used for the label
// and an optional third value can used to disable the option
options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C', true] ],
tabindex: 2,
}),
new SelectView({
name: 'option',
parent: this,
// define groupOptions to generate elements. Pass it an array of
// Objects, each object will become an with groupName being the
// 's name and options being an array (either of strings or array, see
// previous two examples) that will become the s under that
groupOptions: [
{
groupName: "Options 1",
options: [ ['1', 'Option 1'], ['2', 'Option 2'], ['3', 'Option 3', true] ]
},
{
groupName: "Options 2",
options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C', true] ]
}
],
tabindex: 3,
}),
new SelectView({
name: 'model',
parent: this,
// you can pass in a collection here too
options: collection,
// and pick an item from the collection as the selected one
value: collection1.at(2),
// here you specify which attribute on the objects in the collection
// to use for the value returned.
idAttribute: 'id',
// you can also specify which model attribute to use as the title
textAttribute: 'title',
// you can also specify a boolean model attribute to render items as disabled
disabledAttribute: 'disabled',
// here you can specify if it should return the selected model from the
// collection, or just the id attribute. defaults true
yieldModel: false,
tabindex: 4,
})
];
}
});
`

gotchas

- null, undefined, or '' option values are not considered valid when the field is required. This does not apply when options are from a collection and yieldModel is enabled.
- The unselectedText option will always be preferred in updating the control to an empty-ish value.

browser support

- 6.2.0
- Support extending template

- 6.1.0
- Generate elements by passing the new options.groupOptions parameter

- 6.0.0
- Match field label rendering behavior to ampersand-input-view. removes label fallback to name attr
- Improve x-browser testing CI

- 5.0.0
- Change events now always get triggered on the select element instead of blindly calling on the root element.

- 4.0.0
- Extend ampersand-view and support autoRender, where previously this view would autoRender unconditionally

- 3.0.0
- Improve general option edge cases, and add supporting test cases. Primarily targets falsy option value handling.
- Validate immediately to assist when parent FormView tests onload for field validity. Update skipValidation to skipValidationMessage, permit immediate validation, but conditionally display messages.
- Throw an Error when trying to setValue(value) and an option _matching the requested value_ does not exist. The exception to this is when the provided value is null, undefined, or '', and a null option value exists. Because the DOM can only recognize a single empty value for any , which is the empty string '', only a single empty-ish option can only be supported by the view.
- Support 0 value options, both in Model id's and array values.
- Add eagerValidate`.
- Denote a plan for 4.x release
- Bulk update README, and some cody tidying

credits

license