当另一个下拉选择框中选择了一个选项时，我该如何显示一个下拉选择列表？

Question

我希望在选择另一个下拉框的选项时显示一个下拉元素，并在选择另一个选项时隐藏它。

更具体地说，我有3个下拉菜单，一个是国家，一个是省/州，一个是城市。当国家为美国时，我希望城市下拉菜单显示，并且下拉菜单应根据所选州/省进行选择。我还希望无论选择哪个省份，当选择加拿大时，城市下拉菜单都消失。

到目前为止，我已经成功实现了随着国家的变化而改变州/省，但我不知道如何在选择加拿大时删除整个城市元素。

这是我的jsFiddle代码- https://jsfiddle.net/jascd6ue/ 这是我的下拉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>
    }   
});

非常感谢您的帮助。谢谢。

- user4559334

---

所以您想要根据所选州添加另一个城市选择字段？ - ChrisJ

@ChrisJ 是的，我也希望城市根据州份进行更改。 - user4559334

Answer 1

https://jsfiddle.net/jascd6ue/1/

$('.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>");
    }
});

我会稍微修改这段代码。你可以用包含所有州和城市的数组，然后使用循环生成选项。

- ChrisJ