Data binding 敲除将文本标签绑定到下拉列表值所选选项文本

有没有一种简单的方法可以根据同一页面上下拉列表中所选选项的文本值将div的文本框绑定为更改

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

---

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

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

下面是一个使用jQuery快速解决问题的丑陋解决方案：

HTML 实例：

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

HTML

---

实例：

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

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

---

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

我遇到的问题是，我在这里使用的是protectedObservable模式，这导致了问题。-仍然无法让它工作使用这个htough。正是我需要的！非常感谢。我相信你的过滤器中有一个bug，应该是functionindex，elThanks，@FearofahackPlanet，你说得绝对正确。下面是一个更新的示例，它实际上是双向更新的：。

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());

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

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());

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