更新选择菜单关闭另一个选择

我已经合众国（USA），其中包括加拿大各省的名单，更新选择菜单关闭另一个选择

<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个选择，美国&加拿大。（美国是默认选择）

我希望如果选择加拿大省，在第二选择菜单中禁用美国为国家。如果在第二个选择菜单中选择了加拿大，则从第一个选择菜单中移除USA状态。

我只找到方法来填充第二个选择菜单后（如http://jsfiddle.net/FK7ga/），但我的尝试是默认情况下显示所有，并在选择任何一个后更新。

来源

2013-05-29 Joel

@ j08691见下文http://stackoverflow.com/a/16822289/1058222 – Joel

你可以做这样的事情：

$("#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

来源

2013-05-29 16:49:59 letiagoalves

@letiagoalves：

我只是通过改变show/hide到attr('disable','disable');和removeAttr('disable');编辑您的提琴这将导致列表留下，但防止错误的国家组被选中。

只是我2美分。

来源

2013-05-29 17:27:52

之所以能够使其工作，因为我想，随着@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

来源

2013-05-29 19:27:49 Joel

更新选择菜单关闭另一个选择

回答

相关问题