敲除将文本标签绑定到下拉值选定的选项文本答案

【问题标题】：knockout bind text label to dropdown value selected option text敲除将文本标签绑定到下拉值选定的选项文本
【发布时间】：2012-06-25 08:39:38
【问题描述】：

是否有一种简单的方法可以绑定 div 的文本框，以根据同一页面上下拉列表中所选选项的文本值进行更改？

<div data-bind="text: dropdownValue"></div>
<select>
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

请注意，我不想使用 javascript 将值放入 select 元素中。我想直接从 HTML 绑定到值。我还可以包含 jQuery 以使其工作。

【问题讨论】：

标签： data-binding drop-down-menu knockout.js

【解决方案1】：

我在昨天拼凑的东西中寻找类似的功能但找不到它，所以我最终只是更改了我在值属性中存储的内容。有时这是最简单的解决方案。

这是使用 jQuery 解决问题的一种快速而丑陋的解决方案：

HTML

<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

function ViewModel() {
    var self = this;
    this.dropdownValue = ko.observable();
    this.dropdownText = ko.computed(function() {
        return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
    });
};

ko.applyBindings(new ViewModel());

现场示例：http://jsfiddle.net/5PkBF/

如果您希望在多个地方执行此操作，最好编写自定义绑定，例如：

HTML

<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

ko.bindingHandlers.selectedText = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value($("option:selected", element).text());

        $(element).change(function() {
            value($("option:selected", this).text());
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
    }
};

function ViewModel() {
    this.dropdownValue = ko.observable();
};

ko.applyBindings(new ViewModel());

现场示例：http://jsfiddle.net/5PkBF/1/

【讨论】：

我遇到的问题是我在这里使用了 protectedObservable 模式，这导致了问题。 knockmeout.net/2011/03/… -- 仍然无法使用这个 htough 让它工作。
正是我需要的！谢谢！
我相信你的过滤器有bug，应该是function(index, el)
谢谢，@fearofawhackplanet，你说得对。这是一个更新的示例，实际上是双向更新：jsfiddle.net/5PkBF/205。

【解决方案2】：

这就是我实现类似功能的方式。我在模型中定义了一个名为“dropDownValue”的可观察对象。我还有一个名为“dropDownValues”的可观察数组。我的 HTML 看起来像：

<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>

请注意，我对 optionValues 和 optionsText 使用了相同的字段（不确定在这种情况下是否真的需要 optionsText）。在我的特定应用程序中，“dropDownValue”已在其他地方预填充，因此当我打开一个带有上述选择的对话框时，我希望它默认为先前填充的值，并绑定它，以便如果用户更改它，我可以在数据库中反映该更改。

【讨论】：