Question

我有以下2个选择列表..我想隐藏State / Prov，直到所选国家/地区具有相应的optgroup标签。所以..

- 用户选择Alegeria ..未显示状态选择..

- 用户选择美国或加拿大; “状态选择”仅显示optgroup标签与父名称匹配的值。

有意义吗？无法根据OptGroup找到一种方法，而不必手动分配一个＆＃39;类＆＃39;每个子对象

<select id="C_Country" name="C_Country" aria-required="true" class="required">
    <option value=" " selected="">-- Please Select --</option>
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="USA">United States</option>
    <option value="DZ">Algeria</option>
    <option value="CA">Canada</option>
    <option value="AD">Andorra</option>
</select>


<p><label for="C_State_Prov">State or Province <span title="required">*</span></label></p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
    <option value="" selected="">-- Please Select --</option>
    <optgroup label="United States">
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="AZ">Arizona</option>
    <option value="CA">California</option>
    </optgroup>
    <optgroup label="Canada">
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    </optgroup>
</select>

Answer 1

我认为this就是你想要的。

$(function(){
   var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
   state_province.hide();  // hide all state and provinces on page load


   $('#C_Country').change(function(){
       state_province.hide(); // on change of drop down hide all state provinces

       // find the optgroup with the label = the html of the selected dropdown 
       // select the opt group and all of it's children and show them 
       $("#C_State_Prov optgroup[label='"+$(this).find(':selected').html() + "']")
       .children()
       .andSelf()
       .show();  
   }); 
});

这可以清理一下，但你明白了。

jQuery Chaining国家/州选择与OptGroup

1 个答案: