javascript - 简单值绑定(bind)到选择标签

Question

请原谅我的无知，我不会要求您为我创建一个软件解决方案，但我只是想要一个关于如何让我的 Knockout.js 工作的快速类(class)(或修复我的代码)。你看，我是 JS 的新手，我正在尝试在这里解决一些问题:

<p>Show the number here: <span data-bind="text: showVal()" id="curr-value"></span>

                <select data-bind="selectedOptions:selectedBlah, options: $root.numberSet, value: currVal, optionsText: 'numName'">
                </select>

            </p>

            <script type="text/javascript">

              function NumbersSViewModel() {
                self.numberSet = [
                  { numName: "Two in Decimal is", currVal: 2 },
                  { numName: "Three in Decimal is", currVal: 3 },
                  { numName: "Four in Decimal is", currVal: 4 },
                ]

                self.selectedBlah = ko.observableArray([]);

                self.showVal = ko.computed(function() {
                    var value = currVal().toString();
                    return value;
                });

              }

              ko.applyBindings(new NumberSViewModel()); </script>

所以，我想做的是，如果您在某个值上设置下拉菜单，则跨度上的文本值会发生变化。我确信这是可能的，我只是无法让它发挥作用。

Answer 1

Javascript:

function NumbersViewModel() {
    var self = this;

    self.numberSet = [
        { numName: "Two in Decimal is", curVal: 2 },
        { numName: "Three in Decimal is", curVal: 3 },
        { numName: "Four in Decimal is", curVal: 4 },
    ];

    self.selectedNumber = ko.observable();
    }

ko.applyBindings(new NumbersViewModel()); 

HTML:

<select data-bind="options: numberSet,
                   optionsText: 'numName',
                   optionsValue: 'curVal',
                   value: selectedNumber"></select>

Show the number here:
<span data-bind="text: selectedNumber" id="curr-value"></span>

参见Fiddle