我想选择第一个选择元素来确定下一个选择元素的选项。
例如,当某人在第一个选择元素中选择“Ug”时,下一个选择元素中只应显示选项“A和B”。
同样地,当在第一个选择元素中选择选项'Ke'时,只有选项'C和D'应该显示在下一个选择元素中,等等。
单击第一个select元素后,当前代码在第二个select中不显示任何选项。
你能帮我解决这个代码的问题吗?
代码看起来像下面。
先谢谢你了!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control-selector" id="countryselect" name="countryselect" required>
<option class="select-option" value="" selected>- Choose Country</option>
<option class="select-option" value="Ug">Ug</option>
<option class="select-option" value="Ke">Ke</option>
<option class="select-option" value="Rw">Rw</option>
<option class="select-option" value="Tz">Tz</option>
<option class="select-option" value="SA">SA</option>
</select>
<select class="form-control-selector" id="cityselect" name="cityselect" required>
<option class="select-option" value="" selected>- Choose City </option>
<option class="select-option" value="A">A</option>
<option class="select-option" value="B">B</option>
<option class="select-option" value="C">C</option>
<option class="select-option" value="D">D</option>
<option class="select-option" value="E">E</option>
<option class="select-option" value="F">F</option>
<option class="select-option" value="G">G</option>
<option class="select-option" value="H">H</option>
<option class="select-option" value="I">I</option>
<option class="select-option" value="J">J</option>
</select>
<script>
$("#countryselect").change(function(){
var selectedOption = $("select option:selected").text();
$("#cityselect").empty();
for(var index=1;index<10;index++){
if(index>=parseInt(selectedOption)){
$("#cityselect").append($('<option></option>').html(index));
}
}
});
</script>
字符串
2条答案
按热度按时间4dbbbstv1#
您还可以启用/禁用表单字段,而不是添加和删除选择元素的选项。在本例中,每个
cityselect
都在自己的字段集中。所有字段集最初都是禁用的。当选择了countryselect中的选项时,匹配的字段集将被启用。多个表单域具有相同的名称不是问题。如果表单域或域集被禁用,则表单域不会包含在提交事件中。
ryevplcw2#
此代码检查第一个选择元素(#countryselect)中的选定选项,并相应地填充第二个选择元素(#cityselect)。您可以扩展每个国家/地区的if条件,并添加相应的城市选项。如果有许多国家/地区,您可以考虑使用switch语句或更高级的数据结构将国家/地区Map到城市。
字符串