我想在选择另一个选择元素的选项时显示一个选择元素,并在选择另一个选项时隐藏它 .
更具体地说,我有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>
}
});
任何和所有的帮助表示赞赏 . 谢谢
1 回答
https://jsfiddle.net/jascd6ue/1/
我会更改一些代码 . 您可以编写包含所有状态和城市的数组,然后使用循环生成选项