Targeting ein Select-Element mit jQuery .change in IE9

Question

Ich habe zwei Dropdown-Menüs. Eine davon ist besiedelt mit den Monaten des Jahres, und die andere mit den Tagen bevölkert ist:

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

Wenn ein Benutzer einen Wert aus der #birth_month Dropdown wählt, ich brauche die entsprechenden Tage hinzuzufügen oder zu entfernen aus dem Dropdown-Menü #birth_day. Hier ist die jQuery Ich verwende es zu tun:

$('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; 
} 
}); 
}); 

Es ist ein bisschen langatmig, aber funktioniert wunderbar in allen außer IE9. Ich habe in kleinen Tests wie $(this).css('background', 'blue'); hinzugefügt, und die Änderung der Dropdown-Liste löst diese, aber etwas schief geht in meiner switch-Anweisung, und die entsprechenden Tage werden nicht entfernt.

Gibt es eine Möglichkeit, dass ich Refactor das funktioniert, wie IE9 will?

Answer 1

Zunächst können Sie "Stapel" Fälle, die den gleichen Code haben. Sie können auch alle .show() Zeilen vom Switch entfernen und über den Schalter legen, sodass der Code nach jeder Änderung ausgeführt wird. Außerdem bin ich nicht sicher, warum Sie versuchen, das Änderungsereignis zu verhindern?

Wie für IE9. Ich habe den Code in IE11 mit IE9-Emulation getestet und es funktioniert gut, aber ich kann es nicht in einem echten IE9 testen.

So können Sie ersten Test dieses in IE9:

https://jsfiddle.net/6sLsj4Le/

Dann diese einen Test (es fügt/entfernt eine hidden Klasse):

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

Answer 2

Es ist, weil Sie .show() und .hide() auf Optionen tun, die; auf IE; scheitert.

Eher add und remove Optionselemente aus dem Dropdown auf der Basis des ausgewählten Monats.

Edit: https://jsfiddle.net/pankajpatel/6nggn0g1/