如何使用 knockout.js 将数据动态绑定到下拉列表？答案

【问题标题】：how to bind data to dropdown dynamically using knockout.js?如何使用 knockout.js 将数据动态绑定到下拉列表？
【发布时间】：2013-08-10 02:22:52
【问题描述】：

我是 knockout.js 的新手。我无法使用敲除 js 将数据从 api 绑定到下拉列表。

来自 api 和下拉列表的我的 Json 数据是：

[{
ContactID: 0,
FirstName: "Aaa",
LastName: "bbb",
MobileNumber: null,
StartDate: "0001-01-01T00:00:00",
EndDate: "0001-01-01T00:00:00"
},
{
ContactID: 0,
FirstName: "Ccc",
LastName: "ddd",
MobileNumber: null,
StartDate: "0001-01-01T00:00:00",
EndDate: "0001-01-01T00:00:00"
}
]
<select id="selectmenu1" name="" data-theme="c" data-bind="optionsCaption: 'Choose...'">        </select>

我只是将名字、姓氏、联系人ID 绑定到下拉列表，并将名字和姓氏显示为文本，而联系人ID 是该项目的值字段。有人可以就此提出一些建议吗？

【问题讨论】：

你只需要使用knockoutjs.com/documentation/options-binding.html

标签： jquery asp.net-mvc-4 knockout.js jsonp single-page-application

【解决方案1】：

需要使用options binding，这里需要指定：

options 中的项目数组（参见文档示例 3）
您需要设置 optionsValue: 'ContactID' 以将 ContactID 作为值
您需要在 optionsText 中指定一个函数来构建您的选择文本（参见文档示例 4）

所以您的最终绑定将如下所示：

<select id="selectmenu1" name="" data-theme="c" 
  data-bind="options: contacts, 
             optionsValue: 'ContactID', 
             optionsText: function(i) { return i.FirstName + ' ' + i.LastName }, 
             optionsCaption: 'Choose...'">        
</select>

演示JSFiddle.

【讨论】：

您好 nemesv，感谢您的回复。但我从 WEBAPI 获得了上述数据。但你对这些值进行了硬编码。请告诉我在敲除 js 中创建视图模式并将值绑定到下拉列表
有大量关于如何使用 webapi 或敲除的文章：您可以从dotnetcurry.com/ShowArticle.aspx?ID=875 开始。我已经帮你装订了，因为你的问题只是关于它。如果您还有其他具体问题，请提出不同的问题。
嗨 nemesv，谢谢。但它没有在该下拉列表中显示“选择..”作为默认文本???它仅在单击该选项时显示..
如果你有 optionsCaption: 'Choose...' 那么它应该可以工作，就像我的演示一样。你现在的select data-bind 怎么样？
嗨 nemesv，我实际上并不了解我正在尝试使用的代码，你能帮我写下一切吗？你回答的越多，我会问的越多？

【解决方案2】：

您可以使用淘汰赛映射插件。更多细节是 here

你也可以看看很棒 tutorial about how to load and save data

【讨论】：