Update Выберите меню на основе от другого Выбора

Question

Я список государств (США), который включает в себя канадские провинции,

<select> 
<optgroup label="United States"> 
    <option value="AL">Alabama (AL)</option><option value="AK">Alaska (AK)</option><option value="AE">APO state (AE)</option><option value="AO">APO state (AO)</option><option value="AP">APO state (AP)</option><option value="AZ">Arizona (AZ)</option> 
</optgroup> 
<optgroup label="Canada"> 
<option value="AB">Alberta (AB)</option><option value="BC">British Columbia (BC)</option><option value="MB">Manitoba (MB)</option><option value="NB">New Brunswick (NB)</option><option value="NL">Newfoundland and Labrador (NL)</option></optgroup> 
</select> 

Тогда у меня есть еще одно меню выбора, который включает в себя 2 вариант, США & Канады. (США по умолчанию выбрано)

Я хочу, чтобы, если выбрана канадская провинция, отключите США как страну во втором меню выбора. и если Канада выбрана во втором меню выбора, удалите США из первого меню выбора.

Я только нашел способы заполнить второе меню выбора после выбора первого (например, это http://jsfiddle.net/FK7ga/), но я пытаюсь показать все по умолчанию и обновить после выбора одного из них.

Answer 1

Вы можете сделать что-то вроде этого:

$("#filter").on("change", function() { 
    $states = $("#states"); 
    $states.find("optgroup").hide().children().hide(); 
    $states.find("optgroup[label='" + this.value + "']").show().children().show(); 
    $states.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true); 
}); 

See this working DEMO

Answer 2

@letiagoalves:

Я только что отредактировал свою скрипку, изменив show/hide к attr('disable','disable'); и removeAttr('disable'); Это приводит список чтобы остаться, но не допустить выбора выбранной группы.

Только мои 2 цента.

Answer 3

был в состоянии сделать его работу, как я хотел, с помощью @letiagoalves, Ниже приведен код

$("#countries").on("change", function() 
{ 
    if ($("#countries").find(":selected").val()) 
    { 
     $states = $("#states"); 
     $states.find("optgroup").hide().children().hide(); 
     $states.find("optgroup[label='" + this.value + "']").show().children().show(); 
     $states.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true); 
    } 
    else 
    { 
     $states.show().children().show().children().show(); 
    } 
}); 

$("#states").on("change", function() { 
    $countries = $("#countries"); 

    if ($("#states").find("option:selected")) 
    { 
     var c = $("#states").find("option:selected").parent().attr("label"); 
     $countries.find("option[value='" + c + "']").prop("selected", true); 
     $("#countries").change(); 
    } 
}); 

Тем не менее, пытаясь заставить его работать с @Alex-Amthor's idea от отключения, будет обновлять ответ, если мне удастся. Между тем здесь есть demo on jsfiddle