我在显示/隐藏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();
}
}
任何帮助将不胜感激！
嗨，朋友，我写了在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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句