使用jQuery更新knockoutjs下拉列表和knockout值

Question

使用knockoutJs，我在页面上有一个简单的选择

<select id="voucherCountry" data-bind="options: availableCountries, optionsValue:'isoId', optionsText: 'country', value:selectedCountry"></select> 

在视图模型中，我有

function searchViewModel()
{
    var self = this;
    self.voucherNumber = ko.observable();
    self.selectedCountry = ko.observable();
    self.availableCountries = ko.observableArray(
        [
            new Country(250, 'France'),
            new Country(276, 'Germany'),
            new Country(724, 'Spain'),
            new Country(380, 'Italy'),
            new Country(826, 'United Kingdom')
        ])

和

function Country(iso, name)
{
    this.isoId = iso;
    this.country = name;
}

在HTML页面上，我希望能够更改下拉列表的值，并使下拉列表显示新的选项，并在视图模型中选择国家更新。

所以我尝试了一个简单的jQuery语句

function changeCountry(isoId)
{
    $(voucherCountry).val(isoId);
}

它被称为类似

changeCountry(380);

当我调用此选项时，下拉列表上的文本不会更改，但当我单击它更改选项时，我想将其更改为的选项会突出显示。

当我查看selectedCountry（）变量的帮助时，它被设置为初始值，而不是更改后的值。

因此，它似乎是在更新UI，而不是视图模型。

我很确定应该有一个简单的解决方案，但我没有得到

更新：

好的，现在我有一个按钮

<button type="button" data-theme="b" data-bind="click: scanBarcode">Scan Barcode</button>

在视图模型中，此函数：

self.scanBarcode = function()
{
    self.selectedCountry(380);
}

selectedCountry正在更新，但UI未更新。

我认为在<select>数据绑定中如何使用optionsValue和value属性存在问题？

Answer 1

您的changeCountry方法应该更改您将选择绑定到的基本可观测值的值：

function changeCountry(isoId)
{
    selectedCountry(isoId);
}

据我所知，这应该会更新两者。

您还需要将新id作为字符串传入，因为敲除很可能使用类型相等比较器（==），html中的值将是字符串。

Answer 2

此块

function changeCountry(isoId)
{
    $(voucherCountry).val(isoId);
}

存在多个可能的问题。

首先，$(voucherCountry)的求值可能不是有效的选择器；如果你想按id选择下拉列表，你需要这样做：$("#voucherCountry")。

然后您可以使用$("#voucherCountry").val(123)。

第二件可能会混淆的事情是，您正在修改UI，作为间接修改视图模型的一种方式——您可能最好直接更新VM，如searchViewModel.selectedCountry(123)