Knockout.js中如何将ObservableArray对象属性设为下拉框选项？

嘿，这个坑我之前也踩过！你现在看到下拉框里全是[Object Object]，是因为Knockout不知道该把数组里对象的哪个属性拿出来当显示文本——直接绑options的话，它默认会调用对象的toString()方法，结果自然就是这个样子啦。

先提个小细节：你代码里的对象字面量语法有点小问题，Value="Name"要改成Value: "Name"（用冒号而不是等号），不然会报错哦，正确的初始化代码应该是：

self.Questions = ko.observableArray([{QuestionId:1 , Value: "Name"}]);

接下来给你两种常用的解决方案：

1. 指定单个属性作为显示文本 #

如果你只想把Value作为下拉选项的显示内容，直接用optionsText绑定指定属性名就行：

<select data-bind="options: Questions, optionsText: 'Value'"></select>

这样下拉框里就会显示Name而不是[Object Object]了。

2. 自定义组合显示内容 #

要是你想同时展示QuestionId和Value（比如显示1 - Name），可以给optionsText传一个函数，自定义显示内容：

<select data-bind="options: Questions, optionsText: function(item) {
    return item.QuestionId + ' - ' + item.Value;
}"></select>

用ES6模板字符串写法会更简洁：

<select data-bind="options: Questions, optionsText: item => `${item.QuestionId} - ${item.Value}`"></select>

额外：绑定选项的value值 #

如果需要把QuestionId作为下拉选项的value属性（方便后续获取选中的ID），可以再加个optionsValue绑定：

<select data-bind="options: Questions, optionsText: 'Value', optionsValue: 'QuestionId'"></select>

这时候你还可以绑定一个value来跟踪选中项：

self.selectedQuestionId = ko.observable();

然后HTML里补充绑定：

<select data-bind="options: Questions, optionsText: 'Value', optionsValue: 'QuestionId', value: selectedQuestionId"></select>

这样selectedQuestionId就会自动更新为选中项的QuestionId啦。

内容的提问来源于stack exchange，提问作者ali