IE9でjQuery .changeを使用して選択要素をターゲットにする

Question

2つのドロップダウンがあります。一つは、年の月が移入され、そして他の日が移入されています

<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/

その後、この1（それはhiddenクラスを削除/追加）をテスト：

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

Answer 2

これは、オプションで.show()と.hide()を実行しているためです。 IE上で;失敗しています。

むしろaddとremoveオプションは、選択した月に基づいてドロップダウンから選択します。

編集：同じコードを持って、 "積み重ねる" ことができます例 https://jsfiddle.net/pankajpatel/6nggn0g1/