在knockout中使用顺序选项值填充下拉列表，不使用jQuery

Populate a dropdown in knockout with sequential option values without jQuery

本文关键字：下拉列表 jQuery 填充 选项 knockout 顺序      更新时间：2023-09-26

我正在尝试使用knockout填充下拉列表。我用来填充optionsText的数组是一个JSON对象数组。我需要optionsValue是数组中对象的索引或一个序号。

我有以下代码在我的viewModel:

    self.job.submitOptionsArray = this.collection.toJSON();
    this.job.applyPreset = ko.observableArray(self.job.submitOptionsArray);

在我看来:

<select name="" id="applyPreset" data-bind="options: applyPreset, optionsText: 'name', optionsValue: '???', value: somfn"></select>

我需要一个不使用jQuery的解决方案

您可以格式化您的对象，以便根据您的集合有一个索引。您可以使用手动订阅在数组更改时执行一次或每次操作。

this.job.applyPreset = ko.observableArray(self.job.submitOptionsArray);
this.job.applyPreset.subscribe(function(arrayValue) {
    var index = 0;
    ko.utils.arrayForEach(arrayValue, function(arrayItem){
        arrayItem.index = index++;
    })
})

使用index作为您的optionsValue，您将设置

比起使用选项绑定，您可能会发现在您的情况下使用foreach绑定手动创建选项更有益。

例如:

<select data-bind="value: someValue, foreach: options">
    <option data-bind="text: title, attr: {value: $index()}"></option>
</select>
<div data-bind="text: someValue"></div>

你的选项可以是任何东西，我刚刚测试了它:

self.options = ko.observableArray([{
   title: "Some text",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }, {
   title: "Some text 2",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }, {
   title: "Some text 2",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }]);

如果想包含标题，只需将foreach绑定移动到虚拟元素中，并在其余元素上方手动添加一个选项。

您必须自己修复，optionsValue只能指向对象上的成员。如果不提供optionsValue，则该值将是对象本身。

如果对象有id成员，使用它，或者使用带有write方法的计算可观察对象，将实际索引写入，而不是将对象写入底层可观察对象。

相关文章：