Question

Is there an easy way to tell knockout to bind the selected value of a drop down list (not the id, the label) to another field? I have a moderately complicated UI and I would like a clean way to hook not only the id but the label of the option up to a field when it changes.

Something like:

 <select data-bind="options: dropDownLists.Region,optionsText:'RegionName',optionsValue:'RegionId',value:regionFilterId,label:regionFilterName" >

Where the label binding does the same thing as the value binding, but with the label of the option. I suspect I will need a custom binding, but I would like to avoid reinventing the wheel.

Answer 1

Not sure if I’ve understood your requirements correctly, but if you don’t care about the HTML, why not go with this:

<select data-bind="options: dropDownLists.Region,optionsText:'RegionName',value:regionFilter"></select>

The “optionsValue” binding is not used, so the “value” binding updates the observable no with only the ID, but with the full object. That makes it easy to write two computed observables, that return ID and Name of the selected region:

self.regionFilter = ko.observable();

self.regionFilterId = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionId;
});

self.regionFilterName = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionName;
});

http://jsfiddle.net/VA7aF/