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

首先，你可以＆＃34;堆叠＆＃34;具有相同代码的案例。您还可以从交换机中删除所有.show（）行并将其放在交换机上方，以便在每次更改后运行代码。另外，我不确定您为什么要阻止更改事件？

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

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

https://jsfiddle.net/6sLsj4Le/

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

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

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

2 个答案: