Установка выбранного параметра в выпадающем списке после получения результата при вызове ajax

Я использую следующий 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.

Выбрав "summer" в раскрывающемся списке productType, я попытаюсь снова загрузить файл. Это также успешно. Но затем я хочу предварительно выбрать вариант (здесь третий), установив определенный продукт в VoewModel. Этот продукт не выбран в раскрывающемся списке, а также не отображается внутри тега span.

Как выбрать элемент в раскрывающемся меню?

Ответ 1