一尘不染

隐藏/显示 取决于另一个

ajax

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

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

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

谢谢。


阅读 247

收藏
2020-07-26

共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();
    }
});
2020-07-26