隐藏/显示 取决于另一个

Question

我有两个<select>要素。第一个包含国家（例如美国，加拿大，英国，俄罗斯，波兰…），第二个国家被隐藏， 仅
包含美国和加拿大（例如纽约，洛杉矶，芝加哥…或渥太华，温哥华）的城市，萨里…）

如果用户从第一个中选择“加拿大”或“美国” <select>，则第二个应显示并允许他选择城市。

有可能吗？我使用Ajax和JQuery Validation表单访问了许多网站，但没有找到类似的来源。

谢谢。

Answer 1

侦听选择列表的更改事件。在更改事件中，如果所选值是“ USA”或“ Canada”，则显示另一个选择列表，否则将其隐藏。

看一个例子。

假设选择结构如下所示：

<select id="countries">
    <option val="USA">USA</option>
    <option val="Canada">Canada</option>
    <option val="Australia">Australia</option>
    ...
</select>

<select id="cities">
    <option val="Vancouver">Vancouver</option>
    <option val="New York">New York</option>
    ...
</select>

在国家阵列上收听更改事件。

$("#countries").change(function() {
    // find the selected country
    var selectedCountry = $(this).val();
    // if US or Canada
    if(selectedCountry == "USA" || selectedCountry == "Canada") {
        // show the cities list
        $("#cities").show();
    }
    // otherwise hide it
    else {
        $("#cities").hide();
    }
});