ObservableArray在KnockOut JS中选择选项

Question

我想通过敲除js来转换数组以选择选项，我知道这种情况下有3种方法，但是这些方法都无法与我真正想要的完美配合，我想要的是：

1. 设置默认选项Choose an option
2. 获得选定的值
3. 为选项设置attr

每个方法都有自己的问题，但是最后一个方法具有默认选项，可以获取选定的值，但是不能设置attr ，有什么想法吗？

方法1：

错误：

未捕获的错误：绑定“值”不能与虚拟元素一起使用

状态：不工作

 function myfunc() { var self = this; self.estimate = ko.observableArray([]); self.selectedValue = ko.observable(); var obj = [{ method_title: "blah blah", price: "1000" }, { method_title: "blah blah 2", price: "2000" } ]; self.estimate(obj); self.selectedValue.subscribe(function(value) { alert(value); }); } ko.applyBindings(new myfunc()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select id="method"> <option value="0">Choose an option</option> <!-- ko foreach: estimate, value: selectedValue --> <option data-bind="text: method_title, attr: { 'data-price': price, 'value': method_title }, text: method_title"></option> <!-- /ko --> </select> 

方法2：

状态：工作正常，但我无法添加默认选项，它每次都循环播放。

 function myfunc() { var self = this; self.estimate = ko.observableArray([]); self.selectedValue = ko.observable(); var obj = [{ method_title: "blah blah", price: "1000" }, { method_title: "blah blah 2", price: "2000" } ]; self.estimate(obj); self.selectedValue.subscribe(function(value) { alert(value); }); } ko.applyBindings(new myfunc()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select id="method" data-bind="foreach: estimate,value: selectedValue"> <option value="0">Choose an option</option> <option data-bind="text: method_title,attr: {'data-price': price, value: method_title}"></option> </select> 

方法3：

状态：工作正常，但无法设置attr

 function myfunc() { var self = this; self.estimate = ko.observableArray([]); self.selectedValue = ko.observable(); var obj = [{ method_title: "blah blah", price: "1000" }, { method_title: "blah blah 2", price: "2000" } ]; self.estimate(obj); self.selectedValue.subscribe(function(value) { alert(value); }); } ko.applyBindings(new myfunc()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select id="method" data-bind="value: selectedValue,options: estimate, optionsText: 'method_title', optionsValue: 'method_title', optionsCaption: 'Choose an option'"></select> 

Answer 1

您只需要对第三种方法进行一些修改。

从淘汰赛官方文档中摘录：可以使用optionsAfterRender参数绑定“选项” 。 我已经修改了您的代码。 看看是否有帮助

 function myfunc() { var self = this; self.estimate = ko.observableArray([]); self.selectedValue = ko.observable(); var obj = [{ method_title: "blah blah", price: "1000", href: "href 1", title: "go to href 1" }, { method_title: "blah blah 2", price: "2000", href: "href 2", title: "go to href 2" } ]; self.setOptionAttr = function(option, item) { if(item) { ko.applyBindingsToNode(option, {attr: {href:item.href,title:item.title}}, item); } } self.estimate(obj); self.selectedValue.subscribe(function(value) { alert(value); }); } ko.applyBindings(new myfunc()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select id="method" data-bind="value: selectedValue,options: estimate, optionsText: 'method_title', optionsValue: 'method_title', optionsCaption: 'Choose an option', optionsAfterRender: setOptionAttr"></select> 

Answer 2

您的第一种方法最有前途，所以我已纠正了这一点。 您不需要在foreach循环中使用value绑定。 它必须在<select> ，并且工作正常。

 function myfunc() { var self = this; self.estimate = ko.observableArray([]); self.selectedValue = ko.observable(); var obj = [{ method_title: "blah blah", price: "1000" }, { method_title: "blah blah 2", price: "2000" } ]; self.estimate(obj); self.selectedValue.subscribe(function(value) { console.log(value); }); } ko.applyBindings(new myfunc()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select id="method" data-bind="value: selectedValue"> <option value="0">Choose an option</option> <!-- ko foreach: estimate --> <option data-bind="text: method_title, attr: { 'data-price': price, 'value': method_title }"></option> <!-- /ko --> </select>