使用 KnockoutJS，如何将数据绑定到来自同一视图模型的 2 个不同的<选择>标签

Using KnockoutJS, how to bind data to 2 different <select> tags from the same view model

本文关键字：标签 选择 模型 KnockoutJS 数据绑定 使用 视图      更新时间：2023-09-26

我的视图上有 2 个选择标签.html像这样

<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: value"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: value"></select>

在我的视图中是这样的东西模型.js

var firstDropdownOptions = ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]);
var secondDropdownOptions = ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ]);

我无法将数据绑定到我的<select>标签。只有第一个<select>标签才能正常工作。另外，如果我将 #second <select> 标签移到 #first <select> 之前，则 #second 显示正确的数据，但不显示 #first <select>。

如何将数据绑定到我的<select>标签？

在两个绑定中，您都使用 value: value .这意味着两个select元素的值都绑定到同一个模型属性，称为 value 。您正在对不同的对象使用不同的数组，因此单个值无法正常运行。尝试使用两个不同的属性来存储值，例如：

var vm = {
    firstDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]),
    secondDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ]),
    // property for storing selected value of firstDropdownOptions:
    selectedFirstOptionValue: ko.observable(''),   
    // property for storing selected value of secondDropdownOptions:
    selectedSecondOptionValue: ko.observable('')
};
ko.applyBindings(vm);

在 HTML 绑定属性中，分别selectedFirstOptionValue和selectedSecondOptionValue(属性将包含数组中的对象(：

<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: selectedFirstOptionValue"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: selectedSecondOptionValue"></select>

这是一个工作的小提琴

作为dotnetom答案的替代方案，这对我也有用。

我没有使用不同的属性在我的视图模型中存储选定的值.js，而是在视图中使用了firstDropdownOptions().value和firstDropdownOptions().value.html而是使用

。

查看.html

<select data-bind="options: firstDropdownOptions, optionsText: 'title', value: firstDropdownOptions().value"></select>
<select data-bind="options: secondDropdownOptions, optionsText: 'title', value: secondDropdownOptions().value"></select>

视图模型.js

var vm = {
firstDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]),
    secondDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ])
};
ko.applyBindings(vm);

这是小提琴。

相关文章：