Javascript 当选择了另一个选择下拉列表上的一个选项时，如何显示选择下拉列表

我想在选择另一个选择元素的选项时显示一个选择元素，并在选择另一个选项时隐藏它

更具体地说，我有3个下拉列表，一个用于国家，一个用于省/州，一个用于城市。我想城市下拉显示时，国家是美国和下拉应根据国家选择。我还希望在选择加拿大时，无论选择哪个省，城市下拉列表都会消失

到目前为止，我已经根据国家更改了州/省，但我不知道在选择加拿大时如何删除整个城市元素

我把这个藏在一个盒子里-

这是我选择的html代码

   Country:
<select name="country" class="country">
    <option value="Canada">Canada</option>
    <option value="United_States">United States</option>
</select>
<br>Province/State:
<select name="pro" class="pro">
    <option value="BC">British Columbia</option>
    <option value="Ontario">Ontario</option>
</select>

国家：
加拿大
美国

省/州：
不列颠哥伦比亚省
安大略

这是Javascript：

$('.country').on('change', function (e) {

    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
if(valueSelected == "Canada") {
$('.pro').html('<option value ="BC">British Columbia</option><option value="Ontario">Ontario</option>');
    // remove the city <select> dropdown
               } else if (valueSelected == "United_States") {
$('.pro ').html('<option value ="FL">Florida</option><option value="NY">New York</option>');
}
});
$('.pro').on('change', function (e) {
    var optionSelectedb = $("option:selected", this);
    var valueSelectedb = this.value;
    if(valueSelectedb == "Florida") {
    // write <select name="city" class="city"><option value="Miami">Miami</option><option value="Orlando">Orlando</option> </select>
    } else if(valueSelectedb == "New York") {
//    write <select name="city" class="city"><option value="New York">New York</option><option value="Buffalo">Buffalo</option></select>
    }   
});

$（'.country'）。关于（'change'，函数（e）{
var optionSelected=$（“选项：已选择”，此选项）；
var valueSelected=此值；
如果（valueSelected==“加拿大”）{
$（'.pro'）.html（'不列颠哥伦比亚省'）；
//删除城市下拉列表
}else if（valueSelected==“美国”）{
$（'.pro'）.html（'FloridaNew-York'）；
}
});
$（'.pro'）。关于（'change'，函数（e）{
var optionSelectedb=$（“选项：已选择”，此选项）；
var valueSelectedb=此值；
如果（valueSelectedb==“佛罗里达”）{
//给奥兰多写封信
}else if（valueSelectedb==“纽约”）{
//写纽约水牛城
}   
});

非常感谢您的帮助。谢谢

$（'.country'）。关于（'change'，函数（e）{
var optionSelected=$（“选项：已选择”，此选项）；
var valueSelected=此值；
如果（valueSelected==“加拿大”）{
$（'.pro'）.html（'不列颠哥伦比亚省'）；
//删除城市下拉列表
}else if（valueSelected==“美国”）{
$（'.pro'）.html（'FloridaNew-York'）；
}
});
$（'.pro'）。关于（'change'，函数（e）{
var optionSelectedb=$（“选项：已选择”，此选项）；
var valueSelectedb=此值；
console.log（valueSelectedb）；
$（“.city选项”）.remove（）；
如果（值SelectedB==“FL”）{
$（“.city”）。追加（“MiamiOrlando”）；
}否则如果（valueSelectedb==“NY”）{
$（“.city”）.append（“纽约水牛”）；
}
});

---

不过我会修改一下这个代码。您可以编写包含所有州和城市的数组，然后使用循环生成选项

，因此您希望它根据选定的州为城市添加另一个选择字段？@ChrisJ是的，我希望城市也按州更改

$('.country').on('change', function (e) {

    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if (valueSelected == "Canada") {
        $('.pro').html('<option value ="BC">British Columbia</option><option value="Ontario">Ontario</option>');
        // remove the city <select> dropdown
    } else if (valueSelected == "United_States") {
        $('.pro ').html('<option value ="FL">Florida</option><option value="NY">New York</option>');
    }
});
$('.pro').on('change', function (e) {
    var optionSelectedb = $("option:selected", this);
    var valueSelectedb = this.value;
    console.log(valueSelectedb);
    $(".city option").remove();
    if (valueSelectedb == "FL") {
        $(".city").append("<option value=\"Miami\">Miami</option><option value=\"Orlando\">Orlando</option>");
    } else if (valueSelectedb == "NY") {
        $(".city").append("<option value=\"New York\">New York</option><option value=\"Buffalo\">Buffalo</option></select>");
    }
});