Question

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设置所选选项？

我查看过for解决方案，但我发现只添加optionsValue，但我需要所选选项的成员作为显示

非常感谢任何帮助。

Answer 1

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

注意：如果下面的评论是我在你的问题中无法理解的，我正在实现一个新的可写计算observable，即allos使用整个对象作为选择。

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>

如何在下拉列表中设置一个可观察的值？

1 个答案: