Question

因为我有两个选择框，一个用于月（Jan-Dec），一个用于Day（1-31）。

我想禁用不存在的月 - 日组合

2月30日＆amp; 31
4月31日
6月31日
9月31日
11月31日

代码：

<sel><span>Month:</span>
    <select required name="month">
        <option value="">Select</option>
        <option value="01">January</option>
        <option value="12">December</option>
    </select>
</sel>
<br />

<sel><span>Day:</span>
    <select required name="day">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="31">31</option>
    </select>
</sel>

Jquery可以做到，但我做不到。

Answer 1

每当您从列表中选择任何选项时，它都会触发change事件。您可以将事件绑定到此更改事件，并实现逻辑以检查当前的月和日组合。

E.g

$('select[name="month"]').change(function () {
   var currentMonth = this.value;
   switch (currentMonth) {
     case '01'://for January
     case '02'://for February
       disableDay(30);
       disableDay(31);
     ...
     ...
   }
});

要在选择下拉列表中删除任何选项

$('select[name="day"]').find('option[value="31"]').prop('disabled', true);

因此，您可以实施一项功能来禁用当天下拉列表中的日期，并根据月份适当调用月份下拉列表，并通过正确的日期进行禁用。

function disableDay (day) {
   $('select[name="day"]').find('option[value="'+day+'"]').prop('disabled', true);
}

Answer 2

使用预制的库https://jqueryui.com/datepicker/，它更简单，更清洁。否则它会有很多jquery，月更改，检查日期，添加/删除以匹配月....

Answer 3

它有点丑陋，但却符合你的要求......

jQuery(document).ready(function($){
  var m = $('select[name=month]');
  var d = $('select[name=day]');
  var hide31 = ['02','04','06','09','11'];
  var hide30 = ['02'];
  var d31 = d.find('[value=31]');
  var d30 = d.find('[value=30]');
  m.change(function(){
    var v = m.val();
    if (hide30.indexOf(v)>=0){  d30.hide();  }
    else { d30.show();  }
    if (hide31.indexOf(v)>=0){  d31.hide();  }
    else { d31.show();  }
  });
});

禁用选择虚拟日期

3 个答案: