$('body').on('change', '.sélecteur', function() { }); ne fonctionne pas comme prévu pour les <select> tag jquery

Je suis nouvelle dans le développement web, en particulier Jquery et Bootstrap. J'ai besoin d'accepter la date d'utilisateurs sur ma page, où ils ont la possibilité soit de donner seulement Année ou An & Mois ou Année, Mois, & Jour. Donc, au lieu d'utiliser un calendrier sélecteur j'ai décidé d'utiliser 3 <select> tag pour cet.

Mes Exigences

1. Sans la sélection de l'Année, l'utilisateur ne devrait pas être en mesure de sélectionner la Date ou le Mois
2. Seulement après la sélection de l'Année, l'utilisateur devrait être en mesure de sélectionner le Mois et après que, Jour.
3. L'élément html contenant ces <select> balises est chargé dynamiquement par le biais d' .fonction load (). Donc, forcé d'utiliser $('body').sur(....)

Merci de consulter cette JSFiddle pour voir ce que j'ai fait.

HTML

<div class="form-inline">
<div class="form-group">
    <select class="form-control year">
        <option>Year</option>
        <option value="2015">2015</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
        <option value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
    </select>
    <select class="form-control month">
        <option>Month</option>
    </select>
    <select class="form-control day">
        <option>Day</option>
    </select>
</div>

JS

$(function () {
var dd_cal, year, month, day, num_year, num_month, num_days, i;
$('body').on('change', '.year', function () {
year = $(this);
dd_cal = year.parent();
month = dd_cal.find($('.month'));
day = dd_cal.find($('.day'));
num_year = year.val();
if (month.children().length <= 1) { //Only if <select> is empty fill it
month.append('<option value="december">December</option>\n\
<option value="november">November</option>\n\
<option value="october">October</option>\n\
<option value="september">September</option>\n\
<option value="august">August</option>\n\
<option value="july">July</option>\n\
<option value="june">June</option>\n\
<option value="may">May</option>\n\
<option value="april">April</option>\n\
<option value="march">March</option>\n\
<option value="february">February</option>\n\
<option value="january">January</option>');
}
if (num_year == 'Year') { //Remove all Months and Days if default value (i.e."Year") of Year is selected.
month.add(day).children('option:not(:first-child)').remove();
}
});
$('body').on('change', month, function () {
num_month = 13 - month[0].selectedIndex;
num_days = Math.round(((new Date(num_year, num_month)) - (new Date(num_year, num_month - 1))) / 86400000);
if (month.val() == 'Month') { //Remove all Days if default value (i.e."Month") of Month is selected.
day.children('option:not(:first-child)').remove();
}
day.children('option:not(:first-child)').remove();
for (i = num_days; i >= 1; i--) {
day.append('<option value=' + i + '>' + i + '</option>');
}
});
});

Pour la première fois quand vous voyez les menus, seulement l'année a des valeurs. Deux Mois et Jours sont vides. Sélectionnez uniquement Année et vérifier les 2 autres menus, vous trouverez les questions suivantes:

Questions

1. La Mois sont remplis correctement quand une Année est sélectionné, mais même Jours sont remplis lorsque seule l'Année est sélectionné. Ce doit remplir seulement après que tous les Mois est sélectionné.
2. Après la sélection du Mois, si la valeur "par défaut" de l'Année est sélectionné ("Année"), tous les deux Mois et en Jours doit être vidé, mais n'arrive pas.
3. La day.children('option:not(:first-child)').remove(); est utilisée pour vider les Jours remplis précédemment et le remplir avec de nouvelles valeurs fondées sur le Mois sélectionné (pour chaque nouvelle sélection). Mais plutôt que de déclencher uniquement pour le changement de Mois, c'est déclenché, même après que chaque fois que le Jour est sélectionné. Essayez de sélectionner un jour de la tripoter et vous pouvez voir que la valeur reste toujours comme "Jour".

De bien vouloir m'aider avec ceci en modifiant mon violon. Merci.

P. S.: je ne veux pas utiliser n'importe quel type de plugin ou un calendrier pour accomplir cela, car il est assez simple et l'approche directe.