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

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() 和 .hide()，这；在 IE 上；失败了。

而是基于所选月份的下拉列表中的 add 和 remove 选项元素。

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

Answer 2

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

至于IE9。我用 IE9 模拟在 IE11 中测试了代码，它工作得很好，但我不能在真正的 IE9 中测试它。

所以，你能先在 IE9 中测试一下吗：

https://jsfiddle.net/6sLsj4Le/

然后测试这个（它adds/removes一个hiddenclass）：

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

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

Targeting a select element with jQuery .change in IE9

javascript

jquery

internet-explorer

internet-explorer-9