Foreach and click data-bind in knockout differences between lists and dropdowns

Question

I managed to change the views of my application using the following code where I can click on the elements of the list

<ul data-bind="foreach: panels">
    <li><a href="#" data-bind="click: $parent.goto, text:'Load '+$data"></a></li>
</ul>

I try to achieve the same functionality but with a dropdown list. My code is the following

<select data-bind="foreach: panels">
    <option data-bind="value: $data, click: $parent.goto, text:'Load '+$data"></option>
</select>

which doesn't seem to work.The options appear correctly but clicking on them nothing happens. What am I doing wrong?

Answer 1

You need to use options binding and pass a function to optionsText:

<div>
    <select data-bind="{ value: selectedPanel, event: { change: goto}, options: panels,optionsText: function(panel) { return 'Load ' + panel}"></select>
</div>

If i understand correctly, when the user click (choose) an option, you want to execute a function. With the event:{change: goto} binding, you are telling knockout to call the 'goto' function everytime that the 'change' event is triggered on the select.

The viewmodel:

function PageViewModel() {
    var self = this;
    self.panels = ko.observableArray(["panel1", "panel2", "panel3"]);
    self.selectedPanel = ko.observable();
    self.goto = function () {
        var selectedValue = self.selectedPanel();
        //do whatever you want 
        console.debug(selectedValue);
    }
}