Question

我有一个从ajax调用返回到Ref Data服务的状态列表

我在我的js文件中定义了这个：

self.StatusIdList = ko.observableArray();
self.StatusTextList = ko.observableArray();

这是我的ajax调用的成功处理程序：

success: function (data, textStatus, message) {
    $.each(data, function (index, item) {
        self.StatusTextList.push(item.statusDescription);
        self.StatusIdList.push(item.statusId);
    });
},

这就是我的HTML

<select data-bind="options: StatusIdList, value: currentFormStatus, optionsText: StatusTextList" class="span12"></select>

如果我将选项设置为StatusTextList，则下拉列表会按预期填充状态列表 - 但是如果将其设置为ID，则会填充我不想要的ID列表。

所以我尝试使用optionsText并希望它会在下拉列表中显示Name，但是将每个状态的唯一ID保留在选项值，但是在我的当前代码的下拉列表中显示如下：

<option value="1">[object Window]</option>

实际上，statusId = 1的唯一ID应显示为＆＃39;订单已接收＆＃39;

Answer 1

您不需要2个单独的阵列来填充下拉列表。使用包含observableArray和StatusList属性的项目创建名为statusId的{{1}}。（more on options binding from KO website）

在您的HTML中：

statusDescription

<select data-bind="options: StatusList, value: currentFormStatus, optionsText: 'statusDescription', optionsValue: 'statusId', optionsCaption: 'Select'"></select>应指向数组中的任何属性，您希望在下拉列表中显示为文本。在我们的例子中，它是optionsText。

statusDescription应指向属性，该属性是该选项的值。在这种情况下，它是optionsValue。

statusId

在你成功的回调中：

var viewModel = function (data) {
   var self = this;
   self.currentFormStatus = ko.observable();
   self.StatusList = ko.observableArray([]);

   // functions, ajax etc 
};

我创建了fiddle

与淘汰赛结合下线？

1 个答案: