knockoutjsforeach数组选择项值绑定

knockoutjs foreach array select item value bind

本文关键字：绑定 选择 数组 knockoutjsforeach      更新时间：2023-09-26

我有这个选择控件，它通过knockoutjs:获取数据

<select class="form-control" data-bind="value: $root.selectedItem, options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>

现在发生的情况是，例如，如果我在列表中的一个下拉列表中选择一个值，foreach列表中的所有其他下拉列表都会自动获得相同的值。

是否可以更改功能，以便只有选定的下拉列表才会更改值？

当前功能的短视频https://i.gyazo.com/1d70b77210e1daf3b14dc29a24bb01e4.gif

添加了更多代码（这是我使用实际下拉值的地方）：

 t.AddToCart = function (n) {
           if (!t.Busy()) {
               t.Busy(!0);
               n.Processing(!0);
               var i = t.SelectedColor();
               if (t.selectedItem()) {
                   $.ajax({
                       type: "POST",
                       url: "/webservices/ShopCartWS.asmx/AddItem",
                       data: "{'packId': " + n.Id + ", 'teacherId': " + t.selectedItem() + " }",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       success: function (i) {
                           if (i.d) {
                               $("#cart-status").sticky();
                               var r = i.d;
                               f(r);
                               n.Processing(!13);
                               t.Busy(!13);
                           }
                       },
                       error: function (n) {
                           u(n);
                       }
                   });
               } else {
                   alert('Choose Teacher First');
                   t.Busy(0);
                   n.Processing(0);
               }
           }
       };

我如何获得价值：

   t._teacherOptions = ko.observable();
               function getTeacherList() {
                   $.ajax({
                       type: "POST",
                       url: "/webservices/Teachers.asmx/GetTeachers",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       success: function (i) {
                           if (i.d) {
                               return t._teacherOptions(i.d);
                           }
                       },
                       error: function (n) {
                           u(n);
                       }
                   });
               }
               getTeacherList();
               t.TeacherOptions = ko.computed(function () {
                   return t._teacherOptions();
               });

如果希望不同的选择能够具有不同的值，则需要为它们的value绑定提供不同的可观察性。看起来你是在foreach中创建这些选择，所以$root.selectedItem不是一个变量，而是在你循环的每个元素中都有一个变量。

function TeacherOption(name, id) {
  return {
    TeacherName: name,
    TeacherId: id
  };
}
vm = {
  TeacherOptions: ko.observableArray([
    TeacherOption('one', 1),
    TeacherOption('two', 2),
    TeacherOption('pi', 3)
  ]),
  selectors: [{
    selectedItem: ko.observable()
  }, {
    selectedItem: ko.observable()
  }]
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: selectors">
  <select class="form-control" data-bind="value: selectedItem, options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>
</div>

相关文章：