Установка выбранной опции в выпадающем списке после получения результата от 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); 

}); 

An следующие 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.

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

Answer 1

Вы указали параметры привязки для вашего товара, выберите «значение». Это свойство, которое будет связано привязкой значения к продукту.

Так что вам нужно сделать:

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

Вот скрипку, где я это продемонстрировать. Добавочные параметры, которые я загружаю, являются объектом, и я должен установить свой selectedSubOption на id, который я хочу.

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