Ajuste de la opción seleccionada en una lista desplegable después de recibir el resultado de la llamada AJAX

Question

uso el siguiente modelo de vista

<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); 

}); 

Una el siguiente código 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> 

Cuando la página se carga el se envía una llamada ajax y recibo todos los productos para el invierno. Se muestran en el menú desplegable y el valor seleccionado es 101.

Al seleccionar "verano" en el menú desplegable tipo de producto, intento cargar el producto de nuevo. Esto también es exitoso. Pero luego quiero preseleccionar una opción (aquí la 3ª) configurando un producto específico en VoewModel. Este producto no se selecciona en el menú desplegable y tampoco se muestra dentro de la etiqueta de span.

¿Cómo puedo seleccionar un elemento en el menú desplegable?

Answer 1

Has especificado el enlace optionsValue en tu producto, selecciona para ser 'value'. Esta es la propiedad que estará vinculada por el valor vinculante para el producto.

Así que hay que hacer:

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

Aquí es donde un violín demuestro esto. Las subopciones que cargo son un objeto, y tengo que establecer miSubOption seleccionado en el ID que deseo.

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