javascript - 如何设置下拉菜单中可观察的值？

var vm = (function() {
      var selectedFoo = ko.observable(),
          foos = [
            { id: 1, fooName: 'fooName1', fooType: 'fooType1' },
            { id: 2, fooName: 'fooName2', fooType: 'fooType2' },
            { id: 3, fooName: 'fooName3', fooType: 'fooType3' },
          ];

      return {
        selectedFoo: selectedFoo,
        foos: foos
      };
    }());

            ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: foos,
                   optionsText: 'fooName',
                   optionsCaption: 'Select foo',
                   value: selectedFoo"></select><br />
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

虽然上述代码有效，但如何设置下拉菜单的初始值？假设您从ajax调用中获得了id的2值。您将如何根据ID设置所选选项？

我已经在寻找解决方案，但是我只发现添加optionsValue，但是我需要显示所选选项的成员

任何帮助将非常感激。

最佳答案

你误会了什么。我已在代码段中添加了选定的值，并且，如果您更改ID，则选择列表会正确更新，并且您仍会显示所需的内容。我添加了一个绑定文本框，您可以在其中键入id，以便可以检查它是否按预期工作。

注意：以防万一下面的注释是我无法从您的问题中理解的，我正在实现一个新的可写可计算可观察到的可分配变量，以将整个对象用作选择对象。

var vm = (function() {
      var foos = [
            { id: 1, fooName: 'fooName1', fooType: 'fooType1' },
            { id: 2, fooName: 'fooName2', fooType: 'fooType2' },
            { id: 3, fooName: 'fooName3', fooType: 'fooType3' },
          ],
          selectedFoo = ko.observable(),
          selectedFooId = ko.computed({
            read: function() {
              return selectedFoo() ? selectedFoo().id : null;
              },
            write: function(value) {
              var newSel = foos.find(function(f) {return f.id == value;});
              selectedFoo(newSel);
              }
          });

      return {
        selectedFooId: selectedFooId,
        selectedFoo: selectedFoo,
        foos: foos
      };
    }());

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: foos,
                   optionsText: 'fooName',
                   optionsCaption: 'Select foo',
                   value: selectedFoo"></select><br />
<input type=text data-bind="value: selectedFooId, valueUpdate:'keyup'" />
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

关于javascript - 如何设置下拉菜单中可观察的值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33636337/