jQuery Chaining使用OptGroup選擇國家/州

Question

我有以下2個選擇列表..我想隱藏州/省，直到所選國家有相應的optgroup標籤。所以..

--User選擇Alegeria。沒有選擇狀態示..

--User選擇美國或加拿大;州選擇出現只顯示optgroup標籤匹配父母名稱的值。

讓感覺？能不能找到一種方法基於OPTGROUP做對比有一個「類」手動分配給每個子對象

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

這可以清理一點，但你明白了。