Question

http://jsfiddle.net/E2AMX/ has the exact demonstration of the problem, which is:
I have multiple select boxes on the same page. All the options of the selectboxes are in the given form:

<option value="#id_num">StringVal</option>

and i have one observableArray (say idlist) of id_nums with no separation regarding selectboxes. For example,

idlist = ko.observableArray([1,2,3,4]);

and the selectboxes are as

<select name="first" data-bind="selectedOptions: idlist">
    ...
    <option value="2">Blah</option>
    <option value="3">Blah</option>
    ...
</select>

<select name="second" data-bind="selectedOptions: idlist">
    ...
    <option value="1">Blah</option>
    ...
</select>

<select name="third" data-bind="selectedOptions: idlist">
    ...
    <option value="4">Blah</option>
    ...
</select>

My problem is: when i select one option from a selectbox, other selectboxes return to their initial states. This is directly related to selectedOptions, for if i remove the selectedOptions directive, this problem does not occur.

Any suggestions will be very welcomed.

Thanks.

Answer 1

The selectedOptions binding is meant to be used on a single <select> tag with multi-select enabled. It will keep an array of each item in the options box selected.

The reason you are seeing the behavior you are is because when you you select a single value from one of the drop downs, the selectedOptions binding immediately fires. The logic goes something like this:

1. Update on target <select> fires.
2. Binding extracts the value from <option> and updates the underlying observable array.
3. Observable array fires update since values have changed.
4. Secondary drop downs respond to update, and update their selected value based on what is in the array.
5. Since no value exists in the set of <option> tags, the value is cleared.

This is why you are seeing this behavior. If you want to collect a composite from all selected options, then you will either need to write a new custom binding, or create a seperate array for each <select> you want to bind to.