JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<select id="jform_Anos">
<option value="">Anos</option>
</select>
<select id="jform_Meses">
<option value="">Meses</option>
</select>
<select id="jform_Dias">
<option value="">Dias</option>
</select>
</form>
JavaScript
var criaOption = function(valor, descricao) {
return "<option value='" + valor + "' >" + descricao + "</option>";
};
var criaTodosOptions = function(legenda, valores) {
var todos = [];
todos.push(criaOption(0,legenda));
valores.forEach(function(e) {
todos.push(criaOption(e,e));
});
return todos;
};
var geraIntervaloAnos = function() {
//coloque lógica real para gerar anos
return [2014, 2015, 2016, 2017, 2018];
};
var geraIntervaloMeses = function(ano) {
//coloque lógica real para gerar meses
if ( ano === 2014 ) return [10,11,12];
return [1,2,3,4,5,6,7,8,9,10,11,12];
};
var geraIntervaloDias = function(ano, mes) {
//coloque lógica real para gerar dias
if ( ano === 2015 && mes == 2 ) return [1,2,3];
return [1,2,3,4,5,6,7];
};
var populaComboAnos = function() {
$('#jform_Anos').html( criaTodosOptions('Anos', geraIntervaloAnos() ) );
$('#jform_Anos').change();
};
var populaComboMeses = function() {
var anoSelecionado = parseInt( $('#jform_Anos').val(), 10);
$('#jform_Meses').html( criaTodosOptions('Meses', geraIntervaloMeses(anoSelecionado) ) );
$('#jform_Meses').change();
};
var populaComboDias = function() {
var anoSelecionado = parseInt( $('#jform_Anos').val(), 10);
var mesSelecionado = parseInt( $('#jform_Meses').val(), 10);
$('#jform_Dias').html( criaTodosOptions('Dias', geraIntervaloDias(anoSelecionado, mesSelecionado) ) );
$('#jform_Dias').change();
};
$('#jform_Anos').change(populaComboMeses);
$('#jform_Meses').change(populaComboDias);
populaComboAnos();