JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
 <select name="belgeGrubu" id="belgeGrubu" data-bind="options: availableBgaList, value: selectedBga , optionsText: 'bgaName', optionsValue: 'bgaValue', optionsCaption: 'Belge Grubu Seçiniz...'"></select>

<br/>

<select name="defterNo" id="defterNo" data-bind="options: availableDefterList,  optionsText: 'defterName', optionsValue: 'defterValue', optionsCaption: 'Defter No Seçiniz ...'"></select>

JavaScript

var bgaList = [{bgaName:'A',bgaValue:1},{bgaName:'B',bgaValue:2 },{bgaName:'C',bgaValue:3},{bgaName:'D',bgaValue:4},{bgaName:'E',bgaValue:5 }];


var viewModel = {
  
    availableBgaList : ko.observableArray(bgaList),
    selectedBga :  ko.observable(1)
    
};


viewModel.availableDefterList = ko.dependentObservable( function() {
    var temp = this.selectedBga;
    console.log(viewModel.selectedBga);
    var defterList = new Array();
    for( var i=0;i<10;i++) {
        defterList.push({defterName: temp +i  , defterValue: temp+i  });
    } 
    
    return defterList;
}, viewModel);

 


$(document).ready(function() {
 
     ko.applyBindings(viewModel);  
 
    
})