Knockout绑定文本标签到下拉框选中的选项文本值。

Question

有没有一种简单的方法来绑定一个div的文本框，使其根据在同一页上选中的下拉列表选项的文本值而改变？

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

请注意，我不想使用JavaScript将值放入选择元素中。我想直接从HTML绑定值。我也可以包含jQuery使其工作。

- Adam Levitt

Answer 1

昨天我正在编写一些内容时，想要实现类似的功能，但无法找到相关解决方法，因此最终只能更改value属性中所存储的内容。有时候这是最简单的解决方案。

以下是使用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/

- Jonathan S.

---

我遇到的问题是在这里使用了protectedObservable模式，导致出现了问题。http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html -- 但仍然无法通过此方法使其正常工作。 - Adam Levitt

我相信你的过滤器有一个错误，应该是 function(index, el)。 - fearofawhackplanet

谢谢，@fearofawhackplanet，你说得完全正确。这是一个更新的示例，可以双向更新：http://jsfiddle.net/5PkBF/205/。 - Jonathan S.

Answer 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”在其他地方预先填充，因此当我打开包含上述选择的对话框时，我希望它默认为先前填充的值，并绑定它，以便如果用户更改它，我可以反映该更改回数据库。

- ProfNimrod