2012-03-03 14 views
13

मैं निम्नलिखित ViewModelajax कॉल से एक परिणाम प्राप्त करने के बाद एक ड्रॉपडाउन में चयनित विकल्प स्थापना

<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 है।

उत्पाद में "गर्मी" चुनकर टाइप ड्रॉपडाउन मैं फिर से उत्पाद लोड करने का प्रयास करता हूं। यह भी सफल है। लेकिन फिर मैं VoewModel में एक विशिष्ट उत्पाद सेट करके एक विकल्प (यहां तीसरा एक) को पूर्व निर्धारित करना चाहता हूं। यह उत्पाद ड्रॉपडाउन में नहीं चुना गया है और स्पैन टैग के अंदर भी प्रदर्शित नहीं किया गया है।

मैं ड्रॉपडाउन में कोई आइटम कैसे चुन सकता हूं?

उत्तर

15

आपने विकल्पों को निर्दिष्ट किया है आपके उत्पाद पर वैल्यू बाध्यकारी 'मान' के रूप में चयन करें। यह वह संपत्ति है जो उत्पाद के लिए बाध्यकारी मूल्य से बंधी जाएगी।

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

यहाँ एक बेला जहां मैं इस का प्रदर्शन है:

तो तुम क्या करने की जरूरत। मेरे द्वारा लोड किए गए उप-विकल्प एक ऑब्जेक्ट हैं, और मुझे अपनी चुनीSubOption को उस आईडी पर सेट करना है जिसे मैं चाहता हूं।

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

संबंधित मुद्दे