javascript - 在 Internet Explorer 中显示/隐藏选择选项组选项

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()必要时返回。