在 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

display: none 选项元素在浏览器中的工作不一致。不要反对这种行为。更好的解决方案是 .remove() 不需要的 optgroup 并在必要时将其返回 .append()。

Answer 2

您好朋友，我编写的代码在 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>