Question

我是Web开发的新手，特别是Jquery和Bootstrap。我需要接受用户在我的页面上的日期，他们可以选择只提供年度或年份＆amp;月份或年，月＆amp;天即可。因此，我决定使用3个<select>标签，而不是使用日历选择器。

我的要求

如果不选择年份，用户就无法选择日期或月份
只有在选择年份后，用户才能选择月份，之后可以选择日期。
包含这些<select>标记的html元素通过.load（）函数动态加载。因此，被迫使用$（＆＃39; body＆＃39;）。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>');
    }
});

});

第一次看到菜单时，只有年份有值。月份和日期都是空的。然后只选择年并检查其他2个菜单，您会发现以下问题：

问题

选择年份后，月会正确填充，但只选择年份时，即使天也会被填充。只有在选择任何月份后才能填写。
选择月后，如果＆＃34;默认＆＃34;选择年份的价值（即＆＃34;年份＆＃34;），应清空月份和日期，但不会发生。
day.children('option:not(:first-child)').remove();用于清空之前填充的天数，并根据所选月份填写新值（对于每个新选择）。但是，不是仅触发月中的更改，即使每次选择日，也会触发此操作。尝试从小提琴中选择一天，您可以看到值始终保持为＆＃34; Day＆＃34;。

请修改我的小提琴来帮助我。谢谢。

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 </select>那样工作

1 个答案: