如何在淘汰赛中将文本标签绑定到下拉列表的选定选项值？答案

【问题标题】：How can I bind a text label to the selected option value of a dropdownlist in knockout?如何在淘汰赛中将文本标签绑定到下拉列表的选定选项值？
【发布时间】：2015-01-22 03:53:22
【问题描述】：

有没有一种简单的方法来告诉敲除将下拉列表的选定值（不是 id，标签）绑定到另一个字段？我有一个中等复杂的 UI，我想要一种简洁的方法，不仅可以将 id 和选项的标签挂钩到一个字段，当它发生变化时。

类似：

 <select data-bind="options: dropDownLists.Region,optionsText:'RegionName',optionsValue:'RegionId',value:regionFilterId,label:regionFilterName" >

标签绑定与值绑定做同样的事情，但使用选项的标签。我怀疑我需要自定义绑定，但我想避免重新发明轮子。

【问题讨论】：

您是否需要将<option> 元素的值正确设置为ID？（例如，因为用户可能会在某个时候提交该表单）
不，我已将 ID 正确绑定到相应的模型变量。问题是我有一个 UI，它允许用户任意从下拉列表切换到文本标签，如果用户切换回来，如果下拉列表发生更改，我希望文本标签更新。那有意义吗？ ID 和 Display 值都是模型的一部分，我希望能够将两者都绑定到下拉列表，而不仅仅是 ID。
任何登陆这里的人都可能想查看stackoverflow.com/questions/11166504/… 也

标签： knockout.js

【解决方案1】：

不确定我是否正确理解了您的要求，但如果您不关心 HTML，为什么不这样做：

<select data-bind="options: dropDownLists.Region,optionsText:'RegionName',value:regionFilter"></select>

未使用“optionsValue”绑定，因此“value”绑定仅使用 ID 更新 observable no，但使用完整对象。这使得编写两个计算的 observable 变得容易，它们返回所选区域的 ID 和名称：

self.regionFilter = ko.observable();

self.regionFilterId = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionId;
});

self.regionFilterName = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionName;
});

http://jsfiddle.net/VA7aF/

【讨论】：

我没有这样想过，这应该对我有用，假设我可以轻松地保持模型上的基础 ID 正确更新。

【解决方案2】：

您也可以使用订阅：

self.regionFilter = ko.observable();
self.regionFilterId  = ko.observable();
self.regionFilterName = ko.observable();

self.regionFilter.subscribe(function(region) {
    self.regionFilterId(region.RegionId());
    self.regionFilterId(region.RegionName());
});

【讨论】：

【解决方案3】：

上面建议的方法是让我为模型中的每个 ID/名称对创建一个计算值。

我写了一个自定义绑定，支持这个。所以现在，我可以传入我的对象并获取“名称”字段。

希望这会有所帮助：

HTML 绑定：

<span>Agency: </span><span data-bind="keyvalue:Agency,data:'Name'"></span>

HTML 选择：

<select id="selectAgency" data-bind="options: $root.agencies,optionsText: 'Name',optionsValue: function(item){return item;}, optionsCaption: 'Agency', value: Agency"></select>

JavaScript

ko.bindingHandlers.keyvalue = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var field = allBindings.data;
        if (value() !== undefined) {
            $(element).text(value()[field]);
        }
    }
};

【讨论】：