我有一个Knockout.js Web应用程序，其中有一个select2下拉列表。我想将id和text值都绑定到变量上，而不仅仅是id。这是我的数据：
var cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
var selectedCar = ko.observable();
这是我的html：
<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', options: cars"></select>
所以现在，每当我在下拉列表中选择某项时，我的变量就包含整个对象，如下所示：
selectedCar = {id: 1, name: 'Honda'};
唯一的问题发生在您加载页面并希望将下拉列表设置为特定值时。即使在呈现html之前，selectedCar变量未设置为{id: 1, name: 'Honda'}页面呈现时的下拉列表，也未设置为任何内容，但仅将其设置为占位符“选择”。
我究竟做错了什么？
如果要将id和text值都绑定到变量，则需要使用optionsValue绑定并将整个上下文绑定到该变量（$data）；
<select data-bind="value: selectedCar,
optionsCaption: 'Select',
optionsText: 'name',
options: cars,
optionsValue: $data"></select>
通常，我们将指定ID或其他任何值来获取初始值。因此，它将使意义就像在你的问题，以供应整个对象{id: 1, name: 'Honda'}作为初始值selectedCar，如果湿集optionsValue: $data，而不是$optionsValue: 'id'。
（重要）但是事实证明这是行不通的，因为我们正在创建一个新的对象，因此当Knockout的相等性测试将对象cars与对象内部进行比较时，其相等性测试将失败selectedCar。设置初始值的正确方法是cars[0]。
我确定这是一个错字，但无论如何我都会指定：创建任何需要HTML访问的变量时，需要将其绑定到this，这将是对viewModel的引用。
this.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
this.selectedCar = ko.observable();
让我们用一个小提琴来测试所有这些：
var viewModel = function(){
var self = this;
self.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
self.selectedCar = ko.observable(self.cars[0]);
};
ko.applyBindings(new viewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', optionsValue:$data, options: cars"></select>
<!-- to verify that we are getting the entire object -->
<p data-bind="text: ko.toJSON(selectedCar)"></p>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句