CODEWITHSUNDEEP
javascriptjqueryinternet-explorerinternet-explorer-9
Cameron Scott
Cameron Scott

Reputation: 1306

Targeting a select element with jQuery .change in IE9

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?

Upvotes: 0

Views: 69

Answers (2)

Pankaj
Pankaj

Reputation: 966

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/

Upvotes: 1

yezzz
yezzz

Reputation: 3020

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/

Upvotes: 1

Related Questions