Question

我的view.html上有2个选择标签，就像这样＆lt; select id =“first”data-bind =“options：firstDropdownOptions，optionsText：'title'，value：value”＆gt;＆lt; / select＆gt; ＆lt; select id =“second”data-bind =“options：secondDropdownOptions，optionsText：'title'，value：value”＆gt;＆lt; / select＆gt; 在我的viewmodel.js中有类似的东西 var firstDropdownOptions = ko.observableArray（[ {值：-1，标题：'选择类型'}， {值：111，标题：'选项1'}， {值：222，标题：'选项2'}， {值：333，标题：'选项3'} ]）; var secondDropdownOptions = ko.observableArray（[ {值：-1，标题：'选择类型'}， {值：1，标题：'选项新1'}， {值：2，标题：'选项新2'}， {值：3，标题：'选项新3'} ]）; 我无法将数据绑定到我的＆lt; select＆gt;标签。只有第一个＆lt; select＆gt;标签工作正常。另外，如果我移动#second＆lt; select＆gt;在#first＆lt; select＆gt;之前标记，然后#second显示正确的数据，而不是#first＆lt; select＆gt;。如何将数据绑定到我的＆lt; select＆gt;标签？

Answer 1

在两个绑定中，您使用的是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>

这是一个有效的jsFiddle

Answer 2

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

我没有使用不同的属性在viewmodel.js中存储所选的值，而是使用了view.html中的firstDropdownOptions().value和firstDropdownOptions().value。

view.html

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

viewmodel.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);

这是fiddle。

使用KnockoutJS，如何将数据绑定到同一视图模型中的2个不同的<select>标记

2 个答案: