Note that there are some explanatory texts on larger screens.

plurals
  1. POknockout.js selectedOptions is not updated
    text
    copied!<p>I'm struggling with knockout.js selectedOptions binding.</p> <p>I fill multiselect with items from observableArray A, choose some, store result in observableArray B. When item gets removed from array A, the B array is not updated.</p> <p>Is this knockout issue or am I doing something wrong?</p> <p>HTML code:</p> <pre><code>&lt;h4&gt;All items:&lt;/h4&gt; &lt;div data-bind="foreach: items"&gt; &lt;p data-bind="text: name"&gt;&lt;/p&gt; &lt;button data-bind="click: $parent.remove"&gt;Remove item&lt;/button&gt; &lt;/div&gt; &lt;select multiple="multiple" data-bind=" options: items, selectedOptions: selectedItems, optionsText: 'name', optionsCaption: 'Choose one or more...' "&gt;&lt;/select&gt; &lt;h4&gt;Selected items:&lt;/h4&gt; &lt;div data-bind="foreach: selectedItems"&gt; &lt;p data-bind="text: name"&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>var viewModel = { items: ko.observableArray([ { name: "Item 1", id: "1" }, { name: "Item 2", id: "2" }, { name: "Item 3", id: "3" } ]), selectedItems: ko.observableArray(), remove: function(item) { viewModel.items.remove(item); } } ko.applyBindings(viewModel); </code></pre> <p>Here's the fiddle: <a href="http://jsfiddle.net/3FYAe/" rel="nofollow">http://jsfiddle.net/3FYAe/</a></p> <p>How to reproduce:</p> <ol> <li><p>select one or more items in the multiselect field, they appear in the list below ("Selected items")</p></li> <li><p>remove one of the selected items</p></li> <li><p>the selectbox is updated</p> <p>4.</p> <ul> <li>Expected: "Selected items" is updated</li> <li>Actual: "Selected items" keeps deleted values</li> </ul></li> </ol>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload