Как отобразить выпадающий список выбора при выборе одного варианта в другом выпадающем списке выбора

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

Любые и вся помощь оценена. Благодаря

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

Я хотел бы изменить этот код некоторые, хотя. Вы можете писать массивы со всеми штатами и городами, а затем использовать цикл для генерации опций.