Targeting a select element with jQuery .change in IE9

Question

I have two dropdowns. One is populated with the months of the year, and the other is populated with the days:

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

When a user selects a value from the #birth_month dropdown, I need to add or remove the corresponding days from the #birth_day dropdown. Here is the jQuery I'm using to do it:

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

It's a bit long-winded, but works beautifully in all except IE9. I've added in little tests like $(this).css('background', 'blue');, and changing the #birth_month dropdown does trigger those, but something is going awry in my switch statement, and the corresponding days are not being removed.

Is there a way I can refactor that works in the way IE9 wants?

Possibly related: http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery — Stryner, May 10 '16 at 19:21
What do you mean by "works beautifully in all except IE9" ? Whats the problem? Whats the error ? — Pablo Matias Gomez, May 10 '16 at 19:26
@PabloMatiasGomez, the corresponding days are not being removed in IE9, where it otherwise functions in all modern browsers. — Cameron Scott, May 10 '16 at 19:31

Pankaj · Answer 1 · 2016-05-11T07:35:42.277

1

It is because you are doing .show() and .hide() on options, which; on IE; is failing.

Rather add and remove option elements from the dropdown on the basis of the month selected.

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

edited May 11 '16 at 07:35

answered May 10 '16 at 19:34

Pankaj

954
8
15

Can you give me a source for that? – yezzz May 10 '16 at 20:42
@yezzz I have added jsfiddle link, please see that. – Pankaj May 11 '16 at 08:00

score 1 · Accepted Answer · answered May 10 '16 at 20:40

First of, you can "stack" cases that have the same code. You can also remove all the .show() lines from the switch and put it above the switch, so it runs the code after every change. Also, I'm not sure why you are trying to prevent the change event?

As for IE9. I tested the code in IE11 with IE9 emulation and it works just fine, but I can't test it in a real IE9.

So, can you first test this in IE9:

https://jsfiddle.net/6sLsj4Le/

Then test this one (it adds/removes a hidden class):

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

Targeting a select element with jQuery .change in IE9

2 Answers2