Ustawianie wybranej opcji w menu rozwijanym po otrzymaniu wyników z wywołania ajax

Question

używam następujący 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 następujący kod 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> 

Gdy strona ładuje wywołanie ajax jest wysyłane i wszystkie produkty otrzymuję na zimę. Są one wyświetlane na liście rozwijanej, a wybrana wartość to 101.

Wybierając "lato" w liście rozwijanej productType, próbuję ponownie załadować produkt. To również się udaje. Ale potem chcę wstępnie wybrać opcję (tutaj trzecią), ustawiając konkretny produkt w VoewModel. Ten produkt nie jest zaznaczony w menu i nie jest wyświetlany w tagu zakresu.

Jak wybrać pozycję z menu?

Answer 1

Określasz opcję optionsValue dla wybranego produktu, aby była "wartością". Jest to właściwość, która będzie związana wartością wiążącą produkt.

Więc trzeba zrobić:

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

Oto skrzypce gdzie mogę to wykazać. Podpcje dodatkowe, które ładuję, są obiektem i muszę ustawić wybraną opcję MojeOdpowanie na id, który chcę.

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