2

我有一个州列表（美国），其中包括加拿大各省，

<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/）后填充第二个选择菜单的方法，但我尝试的是默认显示全部，并在选择任何一个后更新。

4

3 回答 3

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

看到这个工作演示

于 2013-05-29T16:49:59.277 回答
1

@letiagoalve：

我刚刚通过更改show/hide为attr('disable','disable');和编辑了您的小提琴，removeAttr('disable');这会导致列表保留，但会防止选择错误的状态组。

只是我的2美分。

于 2013-05-29T17:27:52.240 回答
1

在@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 的禁用想法一起使用，如果我成功，将更新答案。同时这里是关于 jsfiddle 的演示

于 2013-05-29T19:27:49.847 回答