Show/hide select optgroup options in Internet Explorer

Question

I have an issue with showing/hiding optgroup options. I tried showing them in Chrome and Internet explorer but never got to a solution that would work on both environments

   <select value="null" style="VERTICAL-ALIGN: top" id="country_code" class="elqField" name="country_code" onchange="validateStates(this.value)" > 
<option selected="true" value="">Choose One...</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>

 <select value="null" style="VERTICAL-ALIGN: top" id="state_code" class="elqField"name="state_code" size="1" > 
<option selected = "true" value="">Choose One...</option>
<optgroup id="usstates" label="United States" style="display:none;">
<option style="display:none;"  value="AK">Alaska</option>
<option style="display:none;" value="AL">Alabama</option>
<option style="display:none;" value="AZ">Arizona</option>
<option style="display:none;" value="AR">Arkansas</option>
<option style="display:none;" value="CA">California</option>
<option style="display:none;" value="CO">Colorado</option>
<option style="display:none;" value="CT">Connecticut</option>
<option style="display:none;" value="DE">Delaware</option>
<option style="display:none;" value="DC">District of Columbia</option>
<option style="display:none;" value="FL">Florida</option>
<option style="display:none;" value="GA">Georgia</option>
<option style="display:none;" value="HI">Hawaii</option>
<option style="display:none;" value="ID">Idaho</option>
<option style="display:none;" value="IL">Illinois</option>
<option style="display:none;" value="IN">Indiana</option>
<option style="display:none;" value="IA">Iowa</option>
<option style="display:none;" value="KS">Kansas</option>
<option style="display:none;" value="KY">Kentucky</option>
<option style="display:none;" value="LA">Louisiana</option>
<option style="display:none;" value="ME">Maine</option>
<option style="display:none;" value="MD">Maryland</option>
<option style="display:none;" value="MA">Massachusetts</option>
<option style="display:none;" value="MI">Michigan</option>
<option style="display:none;" value="MN">Minnesota</option>
<option style="display:none;" value="MS">Mississippi</option>
<option style="display:none;" value="MO">Missouri</option>
<option style="display:none;" value="MT">Montana</option>
<option style="display:none;" value="NE">Nebraska</option>
<option style="display:none;" value="NV">Nevada</option>
<option style="display:none;" value="NH">New Hampshire</option>
<option style="display:none;" value="NJ">New Jersey</option>
<option style="display:none;" value="NM">New Mexico</option>
<option style="display:none;" value="NY">New York</option>
<option style="display:none;" value="NC">North Carolina</option>
<option style="display:none;" value="ND">North Dakota</option>
<option style="display:none;" value="OH">Ohio</option>
<option style="display:none;" value="OK">Oklahoma</option>
<option style="display:none;" value="OR">Oregon</option>
<option style="display:none;" value="PA">Pennsylvania</option>
<option style="display:none;" value="RI">Rhode Island</option>
<option style="display:none;" value="SC">South Carolina</option>
<option style="display:none;" value="SD">South Dakota</option>
<option style="display:none;" value="TN">Tennessee</option>
<option style="display:none;" value="TX">Texas</option>
<option style="display:none;" value="UT">Utah</option>
<option style="display:none;" value="VT">Vermont</option>
<option style="display:none;" value="VA">Virginia</option>
<option style="display:none;" value="WA">Washington</option>
<option style="display:none;" value="WV">West Virginia</option>
<option style="display:none;" value="WI">Wisconsin</option>
<option style="display:none;" value="WY">Wyoming</option>
</optgroup>
<optgroup id ="castates" label ="Canada" style="display:none;">
<option style="display:none;" value="AB">Alberta</option>
<option style="display:none;" value="BC">British Columbia</option>
<option style="display:none;" value="MB">Manitoba</option>
<option style="display:none;" value="NB">New Brunswick</option>
<option style="display:none;" value="NL">Newfoundland and Labrador</option>
<option style="display:none;" value="NT">Northwest Territories</option>
<option style="display:none;" value="NS">Nova Scotia</option>
<option style="display:none;" value="NU">Nunavut</option>
<option style="display:none;" value="ON">Ontario</option>
<option style="display:none;" value="PE">Prince Edward Island</option>
<option style="display:none;" value="QC">Quebec</option>
<option style="display:none;" value="SK">Saskatchewan</option>
<option style="display:none;" value="YT">Yukon Territories</option>
</optgroup>
</select>

I was trying to control this select list from value retrieved from another select list and I confirmed that its working properly!

    function validateStates (value){
var $sel = $('select[name="state_code"]');
  if (value == 'US'){
        $('optgroup, optgroup > option', $sel).hide();
        $('optgroup[label="United States"]', $sel).children().andSelf().show();

        console.log('hello there!!');

  }
  else if (value == 'CA'){
        $('optgroup, optgroup > option', $sel).hide();
        $('optgroup[label="Canada"]', $sel).children().andSelf().show();
 }
 else {
  $('optgroup, optgroup > option', $sel).hide();
 }
}

Any help would be more than appreciated!

Answer 1

Hi friend i wrote the code that is working in IE10..... please verify from your side and let me know if any issue....

<script type="text/javascript">   

    if (navigator.appName.toString() == 'Microsoft Internet Explorer') {
        var arrOptGroup = $('#state_code optgroup');
        var us = $(arrOptGroup[0]).detach();
        var ca = $(arrOptGroup[1]).detach();
    }

    function validateStates(value) {

        if (navigator.appName.toString() == 'Microsoft Internet Explorer') {                            
            if (value == 'US') {
                $('#state_code optgroup').remove();
                $('#state_code').append(us);
            }
            if (value == 'CA') {
                $('#state_code optgroup').remove();
                $('#state_code').append(ca);
            }                
            return;
        }

        var $sel = $('select[name="state_code"]');
        if (value == 'US') {
            $('optgroup, optgroup > option', $sel).hide();
            $('optgroup[label="United States"]', $sel).children().andSelf().show();

            console.log('hello there!!');

        }
        else if (value == 'CA') {
            $('optgroup, optgroup > option', $sel).hide();
            $('optgroup[label="Canada"]', $sel).children().andSelf().show();
        }
        else {
            $('optgroup, optgroup > option', $sel).hide();
        }
    }
</script>

Answer 2

display: none on option elements does not work consistently across browsers. Do not fight this behavior. A better solution is to .remove() the unwanted optgroup and .append() it back when necessary.