$('body').on('change', '.selector', function() { }); <select> 标签 jquery 没有按预期工作

Question

我是网络开发的新手，尤其是 Jquery 和 Bootstrap。我需要在我的页面上接受用户的日期，他们可以选择仅提供 Year 或 Year & Month 或 年月日。因此，我决定为此使用 3 个 <select> 标签，而不是使用日历选择器。

我的要求

没有 selecting 年份，用户不应该 select 日期或月份
仅在 select 年之后，用户应该能够 select 月，然后是日。
包含这些 <select> 标记的 html 元素是通过 .load() 函数动态加载的。因此，被迫使用 $('body').on(....)

请参考这个 JSFiddle 看看我做了什么。

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>');
    }
});

});

第一次看到菜单时，只有年份有值。 Month 和 Days 都是空的。那么select只有年，查看其他2个菜单，会发现以下问题：

问题

月在selected时正确填写，但即使天只填写年select编辑。这应该仅在 selected.
月 select 后，如果 Year 的 "default" 值被 selected（即 "Year"），Months 和 Days 都应该清空，但不不会发生。
day.children('option:not(:first-child)').remove(); 用于清空之前填写的天数，并根据月 select 填充新值（对于每个新的 selection）。但不是仅针对月的变化触发，甚至在每次日被 selected 后也会触发。从 fiddle 尝试 select 一天，您可以看到该值始终保持为 "Day"。

请修改我的 fiddle 来帮助我解决这个问题。谢谢。

P.S.: 我不想使用任何类型的插件或日历来完成此操作，因为这是一种非常简单直接的方法。

Answer 1

试试这个，

var dd_cal, year, month, day, num_year, num_month, num_days, i;

            $('body').on('change', '.year', function() {
                year = $('.year');

               if($(this).val() == 'Year')
               {

                 $('.month'). children('option:not(:first)').remove();   
                    $('.day'). children('option:not(:first)').remove(); 
               }
                else
                {
                dd_cal = year.parent();
                month = dd_cal.find($('.month'));
                day = dd_cal.find($('.day'));

                if (month.children().length <= 1) {
                    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>');
                }
                }
            });

            $('body').on('change', '.month', function() {
                num_year = year.val();
                num_month = 13 - month[0].selectedIndex;
                num_days = Math.round(((new Date(num_year, num_month)) - (new Date(num_year, num_month - 1))) / 86400000);

                day.children('option:not(:first-child)').remove();

                for (i = num_days; i >= 1; i--) { 
                    day.append('<option value=' + i + '>' + i + '</option>');
                }
            }); 

});

$('body').on('change', '.selector', function() { }); <select> 标签 jquery 没有按预期工作

$('body').on('change', '.selector', function() { }); not working as expected for <select> tag jquery

php

jquery

calendar

twitter-bootstrap-3