Question

我遇到的问题与AJAX的动态选择选项有关。用例是更改select＃1中的值应填充select＃2到ajax中的选项。不常见的是，＃2的值也是异步的，但是具有不同的ajax。 jsFiffle显示以下代码（简化 - 仅1个ajaxlike超时）。我们有2个选择，一个具有静态选项，另一个具有动态选项。两者都有价值约束力。＆lt; select id =＆＃34; select_1＆＃34; data-bind =＆＃34; value：select_1_value＆＃34;＆gt; ＆lt;选择的选项＆gt; 1＆lt; / option＆gt; ＆LT;选项→2＆LT; /选项＆GT; ＆LT;选项→3＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆lt; select id =＆＃34; select_2＆＃34; data-bind =＆＃34;选项：selectOptions，value：select_2_value＆＃34;＆gt;＆lt; / select＆gt; 选择2值是＆lt; span data-bind =＆＃34; text：select_2_value＆＃34;＆gt; Js部分看起来像这样： var vm = function AppViewModel（）{ this.selectOptions = ko.observableArray（[＆＃39; a＆＃39;，＆＃39; b＆＃39;，＆＃39; c＆＃39;]）; this.select_1_value = ko.observable（1）; this.select_2_value = ko.observable（＆＃39; a＆＃39;）; this.computedValue = ko.computed（function（）{ ＆lt;！ - 阻止初始 - ＆gt; if（this.select_1_value（）！= 1） { 的console.log（＆＃39;变更＆＃39）; this.select_1_value（）; this.selectOptions.removeAll（） var self = this 的setTimeout（函数（）{ self.selectOptions.push（[＆＃39; E＆＃39;]）; self.selectOptions.push（[＆＃39; F＆＃39;]）; ＆lt;！ - 工作但我不想在这里 - ＆gt; ＆LT;！ - self.select_2_value（＆＃39; F＆＃39）; - ＆GT; }，1000）; ＆lt;！ - 不工作 - ＆gt; this.select_2_value（＆＃39; F＆＃39）; } }，这个）; } $（function（）{ ko.applyBindings（new vm（））; }）; 您在jsfiddle中可以看到的是，当select_2_value未设置在异步部分时，它会在清除选项observableArray时被覆盖。我认为周围存在设计缺陷。你能指点一下吗？谢谢！

Answer 1

你可以使用淘汰赛的valueAllowUnset绑定，如果它没有出现在选择选项中，则不会清除该值。

更新了JSFiddle

<select id="select_1" data-bind="value: select_1_value">
    <option selected>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select id="select_2" data-bind="options:selectOptions, value: select_2_value, valueAllowUnset:true"></select>

Select 2 value is <span data-bind="text: select_2_value">

Knockout动态<select>选项覆盖选择值

1 个答案: