javascript - 如何在选择时创建绑定到数据文本字段？

Question

我有一个由选择元素初始化的下拉菜单。

如何创建 mvvm 绑定到选定的数据文本字段？

我没有数据源。

<select id="size">
                <option value="1">S - 6 3/4"</option>
                <option value="2">M - 7 1/4"</option>
                <option value="3">L - 7 1/8"</option>
                <option value="4">XL - 7 5/8"</option>
</select>

我必须绑定到选定的文本。示例：M - 7 1/4"和value

更新

Answer 1

您可以简单地绑定到的值<select>- 如果选项没有设置值，这将使用文本；如果两者都需要，您可以使用计算字段作为文本：

HTML：

<div id="bindme">
    <select id="size" data-bind="value: selectedValue">
        <option value="1">S - 6 3/4"</option>
        <option value="2">M - 7 1/4"</option>
        <option value="3">L - 7 1/8"</option>
        <option value="4">XL - 7 5/8"</option>
    </select>
    <div data-bind="text: selectedValue"></div>
    <div data-bind="text: selectedText"></div>
</div>

JS：

var viewModel = kendo.observable({
    selectedValue: 2,
    selectedText: function () {
        var value = this.get("selectedValue");
        var text = $('#size option[value="' + value + '"]').html();

        return text;
    }
});

kendo.bind($("#bindme"), viewModel);

看演示

还有其他方法可以做到这一点（这不是很漂亮，因为它与 DOM 耦合），例如使用自定义绑定或类似的东西。这有点取决于您的确切设置。