Knockout-jQueryUI

Fork me on GitHub

Selectmenu.html

Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.

Parameters

For each of the widget's options the binding has a corresponding option with the same name. These can be set to static values, or bound either to normal or to observable properties of the viewmodel.

For each of the widget's events the binding has a corresponding option with the same name. These can be set to functions. When invoked the value of the this keyword evaluates to the viewmodel.

refreshOn

Should be bound to one of the viewmodel's observables. Every time that observable changes, the widget is refreshed (it's refresh method is invoked).

widget

Should be bound to one of the viewmodel's writeable observables. The binding will write a jQuery object containing the binding's DOM element into it. The primary use for this option is to invoke the widget's methods on the element.

isOpen [two-way binding]

Controls whether the menu is open.

Notes

When both selectmenu and value are applied to the same <select> element, the two bindings cooperate. When the value of the value binding changes, the selectmenu widget will switch to the appropriate option, and vice versa. However with a pre-3.0 version of knockout it is important to declare value before selectmenu:

Good: <select data-bind="value: valueObservable, selectmenu: {}">...</select>
Bad: <select data-bind="selectmenu: {}, value: valueObservable">...</select>

Example

HTML

<!-- ko foreach: items -->
<input type="radio" name="radios" data-bind="attr: { value: id }, checked: $parent.value" />
<!-- /ko -->
<br/>
<select data-bind="value: value, selectmenu: { width: 300 }, options: items, optionsValue: 'id', optionsText: 'text'">
</select>
<br />

JavaScript

var ViewModel = function () {
  this.items = ko.observableArray([
      { id: '1', text: 'First' },
      { id: '2', text: 'Second' },
      { id: '3', text: 'Third' },
      { id: '4', text: 'Fourth' }
  ]);
  this.value = ko.observable('1');
};

Result