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

how do you set a value that is an observable in a dropdown?

本文关键字：一个 观察 下拉列表 设置      更新时间：2023-09-26

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>

相关文章：