Knockout: How can I bind data to selected value in dropdownlist?

Question

Purpose: I am attempting to develop a simple script to automatically select a size from a dropdownlist and into my cart and proceed to checkout. This is the code on the retail site:

<div id="add">
                    <div class="product-sizes" data-bind="visible: showSizes">
                        <label for="ddlStocks">Size</label>                            
                        <select name="stocks" id="ddlStocks" data-bind="value: selectedStock, isolatedOptions: sizes, optionsText: 'DisplayName', optionsCaption: 'Size', optionsValue: 'StockId'" data-mini="true">                                
                        <option value="">Size</option><option value="134934">UK6.5  - In Stock</option><option value="134935">UK7.5  - In Stock</option><option value="134936">UK8 - In Stock</option><option value="134937">UK8.5  - In Stock</option><option value="134938">UK9 - In Stock</option><option value="134939">UK9.5  - In Stock</option><option value="134940">UK10 - In Stock</option><option value="134941">UK10.5  - In Stock</option><option value="134942">UK11 - In Stock</option><option value="134943">UK12 - In Stock</option><option value="134944">UK13 - In Stock</option></select>
                        <div class="relax">&nbsp;</div>
                    </div>
                    <div id="cphContent_pnSizeGuide" class="size-guide" style="display:none;">

                        <a href="/popup/popup-sizechart.aspx" class="show-popup-window"><img alt="" src="/public/images/icons/size-guide.gif"><span>Size Guide</span></a>
                   </div>
                   <div class="quantities">
                        <div data-bind="visible: showQuantities" style="display: none;">
                            <label for="ddlQuantities">Quantity</label>
                            <select name="quantities" id="ddlQuantities" data-bind="value: selectedQuantity, 
                                                   isolatedOptions: quantities" data-mini="true">    

                            <option value="1">1</option></select>
                        </div>                            
                        <input type="button" class="submit" id="addToCart" data-bind="click: addToCart, visible: showAddButton" value="ADD TO CART">
                        <input type="button" class="submit" id="requestStockAlert" data-bind="click: requestStockAlert, visible: showRequestButton" value="REQUEST STOCK ALERT" style="display: none;"> 
                    </div>
</div>

This is the code I've generated (I can select the correct size, and the code clicks "add to cart", however I cannot figure out how to data-bind all the properties with the select value

var size = "UK9.5 - In Stock";
function setSelectedIndex(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].text == v ) {
s.options[i].selected = true;
return;
}
}
}
setTimeout(function() { setSelectedIndex(document.getElementById("ddlStocks"),size); }, 0530); 
setTimeout(function() { ko.applyBindingsToDescendants(document.getElementById('ddlStocks')); }, 0550); 

function addToCart() { document.getElementById("addToCart").click();
}

setTimeout(function() { addToCart(); }, 1530); 

Answer 1

Knockout has some great documentation and tutorials that you can go through to help you get familiar with it.

For you issue, this is what I think you need to do. JSFiddle Demo

JavaScript

var sizeData = [
    {id:"134934", name:"UK6.5 - In Stock"},
    {id:"134935", name:"UK7.5 - In Stock"},
    {id:"134936", name:"UK8 - In Stock"},
    {id:"134937", name:"UK8.5 - In Stock"},
    {id:"134938", name:"UK9 - In Stock"},
    {id:"134939", name:"UK9.5 - In Stock"},
    {id:"134940", name:"UK10 - In Stock"},
    {id:"134941", name:"UK10.5 - In Stock"},
    {id:"134942", name:"UK11 - In Stock"},    
    {id:"134943", name:"UK12 - In Stock"},
    {id:"134944", name:"UK13 - In Stock"}
];
var availableQuantities = [1,2,3,4,5,6,7,8,9,10];

var selectedQuantity = ko.observable();
var selectedStock = ko.observable();

var addToCart = function(){
    alert("adding stuff to cart");
}
var requestStockAlert = function(){
    alert('requesting Stock alert');
};
var showSizes = ko.observable(true);
var showQuantities = ko.observable(true);
var showAddButton = ko.observable(true);
var showRequestButton = ko.observable(true);
var vm = { 
    selectedStock: selectedStock,
    sizeData: sizeData,
    addToCart: addToCart,
    showSizes: showSizes,
    showQuantities: showQuantities,
    selectedQuantity: selectedQuantity,
    showAddButton: showAddButton,
    showRequestButton: showRequestButton,
    availableQuantities: availableQuantities,
    requestStockAlert: requestStockAlert
    };     

ko.applyBindings(vm);

vm.selectedStock(sizeData[5]);
vm.selectedQuantity(availableQuantities[4]);

HTML

<div id="add">
    <div class="product-sizes" data-bind="visible: showSizes">
        <label for="ddlStocks">Size</label>
        <select  name="stocks" id="ddlStocks" data-bind="options: sizeData,
                       optionsText: 'name',
                       value: selectedStock,
                       optionsCaption: 'Size...'"></select>

        <div class="relax">&nbsp;</div>
    </div>
    <div id="cphContent_pnSizeGuide" class="size-guide" style="display:none;"> <a href="/popup/popup-sizechart.aspx" class="show-popup-window"><img alt="" src="/public/images/icons/size-guide.gif" /><span>Size Guide</span></a>

    </div>
    <div class="quantities">
        <div data-bind="visible: showQuantities" style="display: none;">
            <label for="ddlQuantities">Quantity</label>
            <select  name="quantities" id="ddlQuantities" data-bind="options: availableQuantities,
                       value: selectedQuantity"></select>            
        </div>
        <input type="button" class="submit" id="addToCart" data-bind="click: addToCart, visible: showAddButton" value="ADD TO CART" />
        <input type="button" class="submit" id="requestStockAlert" data-bind="click: requestStockAlert, visible: showRequestButton" value="REQUEST STOCK ALERT" style="display: none;" />
    </div>
</div>

<div data-bind="with: selectedStock">
    <p data-bind="text: name"></p>
</div>
<div data-bind="with: selectedQuantity">
    <p data-bind="text: $data"></p>
</div>