在 IE9 中使用 jQuery .change 定位选择元素

Question

我有两个下拉菜单。一个用一年中的月份填充，另一个用天填充：

<div class="field__group">
<div class="ranged">
    <div class="field field__left">
        <label for="birth_month" class="form-label">Your Birth Month</label>
        <select id="birth_month" name="birth_month" style="background: blue;"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>
    </div>
    <span class="range"></span>
    <div class="field field__right">
        <label for="birth_day">Your Birth Day</label>
        <select id="birth_day" name="birth_day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30" style="display: block;">30</option><option value="31" style="display: none;">31</option></select>
    </div>
</div>

当用户从#birth_month 下拉列表中选择一个值时，我需要从#birth_day 下拉列表中添加或删除相应的日期。这是我用来做这件事的 jQuery：

$('document').ready(function($) {
 $('#birth_month').change(function(e) {
 e.preventDefault();
  switch ( $('#birth_month').val() ) { 
  case '1': 
    $('#birth_day option').show();
    $('#birth_day option[value="31"]').hide();
    break;
  case '2':
    $('#birth_day option').show();
    $('#birth_day option[value="30"]').hide();
    $('#birth_day option[value="31"]').hide();
    break;
  case '3':
    $('#birth_day option').show();
    $('#birth_day option').show();
    break;
  case '4':
    $('#birth_day option').show();
    $('#birth_day option[value="31"]').hide();
    break;
  case '5': 
    $('#birth_day option').show();
    break;
  case '6':
    $('#birth_day option').show();
    $('#birth_day option[value="31"]').hide();
    break;
  case '7': 
    $('#birth_day option').show();
    break;
  case '8': 
    $('#birth_day option').show();
    break;
  case '9':
    $('#birth_day option').show();
    $('#birth_day option[value="31"]').hide();
    break;
  case '10': 
    $('#birth_day option').show();
    break;
  case '11': 
    $('#birth_day option').show();
    $('#birth_day option[value="31"]').hide();
    break;
  case '12': 
    $('#birth_day option').show();
    break;
  default:
    $('#birth_day option').show();
    break;
}
});
});

它有点啰嗦，但除了 IE9 之外，其他所有版本都运行良好。我已经添加了像$(this).css('background', 'blue'); 这样的小测试，并且更改#birth_month 下拉菜单确实会触发这些，但是我的 switch 语句中出现了问题，并且相应的日期没有被删除。

有没有一种方法可以按照 IE9 的方式进行重构？

Answer 1

首先，您可以“堆叠”具有相同代码的案例。您还可以从开关中删除所有 .show() 行并将其放在开关上方，以便在每次更改后运行代码。另外，我不确定您为什么要阻止更改事件？

至于 IE9。我用 IE9 仿真测试了 IE11 中的代码，它工作得很好，但我无法在真正的 IE9 中测试它。

那么，你可以先在 IE9 中测试一下吗：

https://jsfiddle.net/6sLsj4Le/

然后测试这个（它添加/删除hidden 类）：

https://jsfiddle.net/6sLsj4Le/1/

Answer 2

这是因为您在选项上执行.show() 和.hide()，其中；在 IE 上；失败了。

根据所选月份，下拉菜单中的 add 和 remove 选项元素。

编辑： https://jsfiddle.net/pankajpatel/6nggn0g1/