It should be easier to change select control options on the fly.

[dzrw]

Currently, the options binding expects to be associated with an attribute containing a jQuery selector that points to a DOM element containing the options and optgroups for the select control.

<form>
  <select data-bind="options: @availableOptions, value: @selectedValues"></select>
</form>

<script type="text/ignore" id="optionsSource">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</script>

var ExampleModel = Backbone.Model.extend({
    defaults: {
        availableOptions: '#optionsSource'
     },
    selectOdds: function () {
        this.set({selectedValues: [1,3]});
    }
});

This works fine when the availableOptions don't change, but becomes cumbersome when the available options need to change frequently as in cascading dropdown boxes (e.g. City/State).

Therefore, it would be nice to be able to set the availableOptions attribute to an Array of value/text tuples instead of having to manufacture and inject scripts with ids containing options markup into the DOM. The value of the option should be the key in the options hash since the value attributes need to be unique. optgroups should be supported.

this.set({
   availableOptions: [
      { label: 'Group 1', options: { 'saab': 'Saab', 'volvo': 'Volvo' } }
      { label: 'Group 2', options: { 'bus': 'Bus', 'train': 'Train', 'plane': 'Plane' } }
   ]
});

When the value is not an Array but an Object, then a single optionset is assumed (that is, keys represent option values and values represent option innerHtml).

this.set({
   availableOptions: { 'saab': 'Saab', 'volvo': 'Volvo' }
});

[dzrw]

Support for simple options (no opt-groups) added in 3ba6f00fc43f48ff4c3962ca62b556137d0625d0