Knockout.js 击倒下拉列表

获取绑定下拉列表中的选定项时遇到问题

<p>
  Your Group: 
  <select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>
</p>
<p>
  I am visible
  You have chosen <span data-bind="text: selectedGroup() ? selectedGroup().Name : 'Nothing'"></span>
</p>

您的小组：


我看得见
你选择了

当我从下拉列表中选择某个内容时，我希望获取所选内容的文本，而不是值。我是个新手，不知道该怎么做。我为这个做了一把小提琴

改变

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>

致：

---

对于您最初的问题@Pete的回答是正确的，但由于您需要保留GroupId作为您可以做的值

首先，

selectedGroupId

属性被重命名为

selectedGroupId

然后根据

selectedGroupId

，定义一个新的计算可观察

selectedGroupId

：

self.selectedGroup = ko.computed(function () {
  for (var i = 0; i < groups.length; i++) {
    if (groups[i].GroupId == self.selectedGroupId())
      return groups[i];
  }
  return null;
});

self.selectedGroup=ko.computed（函数（）{
对于（变量i=0；i

---

此外，

var self=this

已定义

您还可以在可观察的selectedGroup上使用subscribe函数。我还创建了另一个可观察对象“selectedGroupId”

在订阅事件上，我将GroupId的值分配给新的可观察的“selectedGroupId”

---

请参阅更新的Fiddle

我只是想发布一个我最近用来解决此问题的解决方案。它利用绑定处理程序（valueAppendText和textFromOption）并将一个可观察对象附加到下拉列表跟踪的可观察对象。此解决方案不完整，但演示了不使用添加计算值来获取下拉文本的想法。这个解决方案还使用jQuery，可以删除jQuery，但是由于我在我的项目中使用jQuery（大部分），所以我将它保留了下来。下面的JSFIDLE链接演示了该功能

小提琴：

标记：

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select>

<p>
    I am visible
    You have chosen <span data-bind="textFromOption: selectedGroup"></span>
    <div>
        Group Id: <span data-bind="text: selectedGroup"></span>
    </div>
</p>

---

最简单的解决方案是从元素中删除optionsValue绑定。然后，它将整个对象存储在可观察对象中，您可以获得您的所有属性

---

就我个人而言，我会使用@pomber的答案，并稍加修改

self.selectedGroup = ko.computed(function(){
  return ko.utils.arrayFirst(self.availableGroups(), function(grp) {
    return grp.GroupId == self.selectedGroupId();
  }
}, this);

我不喜欢在计算的观测值中使用for循环

---

为什么不直接使用下拉列表文本值呢？我现在看到，我正在尝试使用knockout构建下拉列表，并在生成的标记中将选项值all设置为groupid字段，这是不必要的。因此，即使标记中没有设置值，当检索所选项目时，我可以将GroupId字段作为所选组对象的一部分。不过，我还需要将GroupId保留为选项的值字段。

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select>

<p>
    I am visible
    You have chosen <span data-bind="textFromOption: selectedGroup"></span>
    <div>
        Group Id: <span data-bind="text: selectedGroup"></span>
    </div>
</p>

ko.bindingHandlers.valueAppendText = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
      var $element, newValueAccessor, observable, setText;

      observable = valueAccessor();
      observable.selectedOptionText = ko.observable(null);
      newValueAccessor = function() {
        return observable;
      };
      $element = $(element);
      setText = function() {
        return observable.selectedOptionText($element.find("option:selected").text());
      };
      setTimeout(setText, 5);
      $element.change(function() {
        return setText();
      });
      return ko.bindingHandlers.value.init(element, newValueAccessor, allBindingsAccessor, context);
    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
      return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, context);
    }
  };

  ko.bindingHandlers.textFromOption = {
    update: function(element, valueAccessor, allBindingsAccessor, context) {
      var newValueAccessor, observable;

      observable = valueAccessor();
      newValueAccessor = function() {
        if (ko.isObservable(observable.selectedOptionText)) {
          return observable.selectedOptionText();
        }
        return observable();
      };
      return ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, context);
    }
  };

<select data-bind="options: availableGroups, optionsText: 'Name',
value: selectedGroup, optionsCaption: 'Choose...'"></select>

self.selectedGroup = ko.computed(function(){
  return ko.utils.arrayFirst(self.availableGroups(), function(grp) {
    return grp.GroupId == self.selectedGroupId();
  }
}, this);