我遇到的问题与 AJAX 的动态选择选项有关。
用例是更改 select #1 中的值应通过 ajax 填充 select #2 中的选项。不常见的是 select #2 的值也是异步获取的,但使用不同的 ajax。
jsFiffle显示以下代码(简化 - 只有 1 个类似 ajax 的超时)。我们有 2 个选择,一个具有静态选项,另一个具有动态选项。两者都有值绑定(bind)。
<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"></select>
Select 2 value is <span data-bind="text: select_2_value">
Js 部分如下所示:
var vm = function AppViewModel() {
this.selectOptions = ko.observableArray(['a','b','c']);
this.select_1_value = ko.observable(1);
this.select_2_value = ko.observable('a');
this.computedValue = ko.computed( function () {
<!-- prevent from initial -->
if (this.select_1_value() != 1)
{
console.log('changed');
this.select_1_value();
this.selectOptions.removeAll()
var self = this
setTimeout(function(){
self.selectOptions.push(['e']);
self.selectOptions.push(['f']);
<!-- DOES WORK But i do not want it here -->
<!--self.select_2_value('f'); -->
}, 1000);
<!-- DOES NOT WORK -->
this.select_2_value('f');
}
}, this);
}
$(function() {
ko.applyBindings(new vm());
});
您在 jsfiddle 中可以看到,当 select_2_value 未在异步部分中设置时,它会在清除选项 observableArray 时被覆盖。
我认为存在设计缺陷。您能帮我指出一下吗?谢谢!
最佳答案
你可以使用 knockout 的 valueAllowUnset绑定(bind),如果选择选项中不存在该值,则不会清除该值。
已更新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">
关于javascript - knockout 动态 <select> 选项覆盖选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30601672/