knockout.js - 收到来自 ajax 调用的结果后，在下拉列表中设置选定的选项

Question

我使用以下 ViewModel

<script type='text/javascript'>
$(function () {

    var dropdownCtor = function (text, value, defaultValue) {
        this.text = text;
        this.value = value;
        this.defaultValue = defaultValue;
    };

    var productsViewCtor = function () {

        var self = this;

        this.productType = ko.observable();
        this.productTypes = ko.observableArray(['Summer', 'Winter']);
        this.products = ko.observableArray();
        this.product = ko.observable();

        this.productType.subscribe(function (newProductType) {


            $.post(
        '/Home/GetProducts',
        { productType: newProductType },
        function (resultProducts) {
            self.products(resultProducts);
            self.product(resultProducts[2]);
        });

        } .bind(this));

    }
    var productViewModel = new productsViewCtor();

    ko.applyBindings(productViewModel);

});

一个下面的 Html

<h3> Your Products:</h3>
<p>
     <span><select data-bind="options: productTypes, value: productType"></select></span>
   <span>
   <select data-bind="options: products , optionsText: 'text' ,  optionsValue: 'value' , value: product"></select></span>
</p>
<ol class="round">
 <li >
        <h5   >productType</h5>
       <span data-bind="text: productType"></span>
    </li>
     <li >
        <h5   >product</h5>
       <span data-bind="text: product"></span>
    </li>
</ol>

当页面加载时，发送了 ajax 调用，我收到了冬天的所有产品。它们显示在下拉列表中，所选值为 101。

通过在 productType 下拉列表中选择“summer”，我尝试再次加载产品。这也是成功的。但随后我想通过在 VoewModel 中设置特定产品来预选一个选项(这里是第三个)。此产品未在下拉列表中选择，也未显示在 span 标签内。

如何在下拉列表中选择一个项目？

Answer 1

您将产品选择上的 optionsValue 绑定(bind)指定为“值”。这是将被绑定(bind)到产品的值绑定(bind)的属性。

所以你需要这样做:

self.product(resultProducts[2].value);

这是我展示这一点的 fiddle 。我加载的子选项是一个对象，我必须将我的 selectedSubOption 设置为我想要的 id。

http://jsfiddle.net/jearles/Z7jzr/