JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div>
    <select data-bind="options: anosInicio, optionText: $data, value: anoInicio"></select>
    <select data-bind="options: mesesInicio, optionText: $data, value: mesInicio"></select>
</div>

<div>
    <select data-bind="options: anosFinal, optionText: $data, value: anoFinal"></select>
    <select data-bind="options: mesesFinal, optionText: $data, value: mesFinal"></select>
</div>

JavaScript

function createNumberRange(inicio, fim){
    return Array.apply(null, Array(fim - inicio + 1)).map(function (x, i) { return inicio + i; })
}
function ViewModel(){
    debugger;
    var self = this;
    
    var inicioFaixaEtaria = { ano: 0, mes: 1 };    
    var finalFaixaEtaria = { ano: 17, mes: 12 };
    
    this.anoInicio = ko.observable(0);
    this.mesInicio = ko.observable(0);
    
    this.anoFinal = ko.observable(0);
    this.mesFinal = ko.observable(0);
    
    
    
    this.anosInicio = ko.observableArray(createNumberRange(inicioFaixaEtaria.ano, finalFaixaEtaria.ano ));
    this.mesesInicio = ko.observableArray(createNumberRange(inicioFaixaEtaria.mes, finalFaixaEtaria.mes ));
    
    this.anosFinal = ko.computed(function(){

        return createNumberRange(self.anoInicio(), finalFaixaEtaria.ano);
        
    });
    
    this.mesesFinal = ko.computed(function(){
        if( self.anoInicio() == self.anoFinal() ){
            return createNumberRange(self.mesInicio(), finalFaixaEtaria.mes);
        }
        
        return createNumberRange(inicioFaixaEtaria.mes, finalFaixaEtaria.mes );
        
    });
    
};


vm = new ViewModel();
ko.applyBindings(vm, document.body);