在从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",我尝试再次加载producst.这也是成功的.但后来我想通过在VoewModel中设置一个特定的产品来预选一个选项(这里是第三个).未在下拉列表中选择此产品,也不会在span标记内显示该产品.

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

Answer 1

您将产品选择上的optionsValue绑定指定为"值".这是将绑定到产品的值绑定的属性.

所以你需要这样做:

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

这是一个小提琴,我演示了这一点.我加载的子选项是一个对象,我必须将selectedSubOption设置为我想要的id.

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