绑定下拉（选择）列表的初始/默认值答案

【问题标题】：Binding initial/default value of dropdown (select) list绑定下拉（选择）列表的初始/默认值
【发布时间】：2011-10-02 16:51:02
【问题描述】：

我在设置下拉菜单的初始值时遇到了一个小问题。下面的代码是$(document).ready中的视图模型定义和初始化。我有一个名为sourceMaterialTypes 的数组和一个selectedSourceMaterialType 代表该数组的选定值。我正在使用（ASP.Net MVC）模型和 ViewBag 中的值初始化视图模型。

var viewModel = {
    sourceMaterialTypes : 
        ko.observableArray(@Html.Raw(Json.Encode(ViewBag.SourceMaterialTypes))),
    selectedSourceMaterialType :
        ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))),
    ingredientTypes :
        ko.observableArray(@Html.Raw(Json.Encode(ViewBag.IngredientTypes))),
    selectedIngredientType : ko.observable()
};

$(document).ready(function () {

    ko.applyBindings(viewModel);

    viewModel.selectedSourceMaterialType.subscribe(function(newSourceMaterialType) {
        $.getJSON("/IngredientType/FindByMaterialType",
                  { "id": newSourceMaterialType })
            .success(function (data) {
                viewModel.ingredientTypes($.parseJSON(data));
            })
            .error(function () { alert("error"); });
    });
});

以下是我的下拉（选择）列表与 Knockout 绑定定义的定义。

<select id="SourceMaterialTypeId"
        name="SourceMaterialTypeId"
        data-bind="options: sourceMaterialTypes,
                   optionsText: 'Name',
                   optionsValue : 'Id',
                   value: selectedSourceMaterialType"></select>

这一切都很好，除了源材料下拉列表中最初选择的值（selectedSourceMaterialType 绑定正确，所以当下拉选择更改时，它的值会正确更新，这只是我遇到问题的初始选择），它始终是我的视图模型上 sourceMaterialTypes 数组中的第一项。

我希望最初选择的值是从（服务器端）模型初始化为 selectedSourceMaterialType 视图模型属性的值。

【问题讨论】：

这应该可以正常工作；检查生成的 html 的源并查看从 > selectedSourceMaterialType:ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))) 呈现的内容我怀疑它是一个空参数。
@nEEbz no, not empty....selectedSourceMaterialType : ko.observable({"Id":2,"Name":"Fruit","Description":"Fresh Fruit","MeasuredIn":1,"MeasuredInValue":1}), 是渲染的内容，但是初始选择是 sourceMaterialTypes 中的第一项...。它渲染为sourceMaterialTypes : ko.observableArray([{"Id":1,"Name":"Coffee Bean","Description":"Raw coffee beans","MeasuredIn":0,"MeasuredInValue":0},{"Id":2,"Name":"Fruit","Description":"‌Fresh Fruit","MeasuredIn":1,"MeasuredInValue":1}])，（初始选择是“咖啡豆”）
我猜你只需要在 selectedSourceMaterialType 可观察函数中传递 Id 而不是整个对象 -> selectedSourceMaterialType: ko.observable(2)
是的，使用 optionsValue: 'Id'，它会期望 selectedSourceMaterialType 只是 Id。
@nEEbz 啊，当然，我的错。如果您想提供该答案作为答案，我将接受并投票。

标签： javascript asp.net-mvc knockout.js

【解决方案1】：

API 为您提供解决方案，您只需将 optionsCaption 添加到您的选择中。

<select id="SourceMaterialTypeId"
    name="SourceMaterialTypeId"
    data-bind="options: sourceMaterialTypes,
               optionsText: 'Name',
               optionsValue : 'Id',
               value: selectedSourceMaterialType,
               optionsCaption: 'Please select...'"></select>

【讨论】：

我相信问题更集中于让初始/默认值成为模型/视图模型设置的值。因此，如果在编辑项目时，您希望显示最后选择的值，而不是“请选择...”
提示：optionsCaption 本身就是一个 observable。如果它返回 null 那么该项目将不会出现在选项列表中 - 所以你可以这样做monthCaption = ko.computed(() => this.nextShipmentDate_month() ? null : '-- Select Month --');（假设这里是打字稿）

【解决方案2】：

我猜你只需要在selectedSourceMaterialType observable 函数中传递 Id 而不是整个对象 ->

selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id)

【讨论】：

但是如果你想提供整个对象而不使用 optionsValue:'Id' 有谁知道怎么做？

【解决方案3】：

正如@nEEBz 建议的那样，selectedSourceMaterialType 的初始化不正确。在learn.knockoutjs.com "Lists and Collections" tutorial 中，它们通过传递可观察数组的特定索引的值来初始化其视图模型的选定项属性。例如，这样做：

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...而不是这个：

selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});

这样，所选项目的值是对下拉列表项目所在的同一可观察数组中的项目的引用。

【讨论】：

我不认为他们是这样做的吗？这需要对从服务器返回的结果进行额外处理，以确定需要选择的项目的索引，而您不需要这样做。