set the selectedValue of drop-down list in a template (on load) using knockoutjs

http://stackoverflow.com/questions/7220804/set-the-selectedvalue-of-drop-down-list-in-a-template-on-load-using-knockoutjs

by mgrcic

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<p>Number of travellers: <select id="nrTravelers" data-bind="options: noOfTrav ,  selectedOptions: SelectedNo"></select></p>


<table>
    <tbody data-bind="template: {name:'AdditionalTravelersTemplate', foreach: TravRows}"></tbody>
</table>



<script id="AdditionalTravelersTemplate" type="text/html">
<tr>
    <th>Traveler <span data-bind="text: position"></span></th>
         </tr>
    <tr>
        <td>
        <select data-bind="options: getUniqueCategories(), optionsText: function(item) {
                       return item.lastName+ ' , ' + item.firstName+ ' - '+ item.AcNum
                   }, optionsValue: 'id', optionsCaption: jQuery.isEmptyObject(getUniqueCategories()) ? 'None to select':'choose one...', value: id"></select>
         </td>

    </tr>
</script>

CSS

select#nrTravelers{width:60px}

select {width:300px;}

JavaScript

$(document).ready(function () {
var additionalTravellersDetails= [
        { id: 1, firstName: "George", middleName:"", lastName:"Washington ", AcNum: "12345678" },
        { id: 2, firstName: "Abraham ", middleName:"",  lastName:"Lincoln", AcNum: "23758383" },
        { id: 3, firstName: "Franklin ", middleName:"D.",  lastName:"Roosevelt", AcNum: "94850298" },
        { id: 4, firstName: "John ", middleName:"F.",  lastName:"Kennedy", AcNum: "74982937" }
        ];
    
function Traveller(id, AcNum) {
    this.id = ko.observable(id);
    this.categoryId = ko.observable();
}
    
Traveller.prototype.getUniqueCategories = function() {
    var thisId = parseInt(this.id(), 10);
    return ko.utils.arrayFilter(additionalTravellersDetails, function(additionalTravellersDetails) {
        return (additionalTravellersDetails.id === thisId) || !viewModel.usedCategoryIndex()[ additionalTravellersDetails.id];
    });
}

    
var viewModel = {
    TravRows: ko.observableArray([]),  
    addTravRow: function() {this.TravRows.push(new Traveller());},
    removeTravRow: function(Traveller) { this.TravRows.remove(Traveller);},
    
    noOfTrav: ko.observableArray(['1', '2', '3','4','5','6','7','8','9']),
    SelectedNo: ko.observable('2')    
};

//maintain a position observable on each Traveller in the array
viewModel.TravRows.subscribe(function(currentValue) {
    for (var i = 0, j = currentValue.length; i < j; i++) {
       var row = currentValue[i];
        if (!row.position) {
           row.position = ko.observable(i+1);  
        } else {
           row.position(i+1);   
        }  
    }
});
    
viewModel.usedCategoryIndex = ko.dependentObservable(function() { 
    var result = {};
    ko.utils.arrayForEach(this.TravRows(), function(Traveller) {
        var cat = Traveller.id();
        if (cat) {
            result[cat] = 1;
        }
    });
    return result;
}, viewModel);

//if you want existing values, then here is where you would want to set...