在Internet Explorer中显示/隐藏选择optgroup选项

Question

我在显示/隐藏optgroup选项时遇到问题。我试图显示Chrome和Internet Explorer他们，但从来没有得到，将在这两种环境

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

我试图控制从另一个选择列表中检索值这个选择列表中的工作，一个解决方案，我证实其正常工作！

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

任何帮助将不胜感激！

Answer 1

喜的朋友，我写了在IE10使用的代码.....请从你身边核实并让我知道如果任何问题....

<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的选项元素不起作用始终跨浏览器。不要反对这种行为。更好的解决方案是在必要时将.remove()不需要的optgroup和.append()返回。