截至目前,我有两个选项列表供HTML表单选择。但是,在一个列表中选择一个值将使第二个列表中的某些选项变为不可能。具体来说,第一个列表是可能的单位(厘米,英寸,英尺)的列表,而第二个是位置的列表。选择一个单位将限制拥有该单位的可能位置的数量。同样,选择国家/地区值将限制可用的单位数。在用户选择位置或单位后,是否有可能以任何方式限制用户可用的选择?
Unit:
<br>
<select name="unit_input">
<br>
<option selected disabled hidden></option>
<option value="l">League</option>
<option value="m">Mile</option>
<option value="ft">Foot</option>
<option value='m'>Meter</option>
<option value="st">Stage</option>
<option value="km">Kilometer</option>
</select>
<br>
Location:
<br>
<select name="nationality_input">
<br>
<option selected disabled hidden></option>
<option value="italian">Italian</option>
<option value="german">German</option>
<option value="french">French</option>
<option value="hungarian">Hungarian</option>
<option value="british">British</option>
<option value="swiss">Swiss</option>
<option value="spanish">Spanish</option>
</select>
<br>
<br>
是,使用JavaScript:https://codepen.io/dpamonty/pen/PoqRZQd
((不要忘记将ID添加到您的下拉列表中,代码才能正常工作。)
<!doctype html>
<html>
<head>
</head>
<body>
Unit:
<br>
<select id="unit_input" name="unit_input" onchange="restrictDropDownLists()">
<br>
<option selected disabled hidden></option>
<option value="l">League</option>
<option value="m">Mile</option>
<option value="ft">Foot</option>
<option value='m'>Meter</option>
<option value="st">Stage</option>
<option value="km">Kilometer</option>
</select>
<br>
<br>
<br>
Location:
<br>
<select id="nationality_input" name="nationality_input" onchange="restrictDropDownLists()">
<br>
<option selected disabled hidden></option>
<option value="italian">Italian</option>
<option value="german">German</option>
<option value="french">French</option>
<option value="hungarian">Hungarian</option>
<option value="british">British</option>
<option value="swiss">Swiss</option>
<option value="spanish">Spanish</option>
</select>
<br>
<br>
<script type="text/javascript">
function restrictDropDownLists(){
var unit = document.getElementById("unit_input");
var nationalilty = document.getElementById("nationality_input");
switch(unit.value){
case "m":
// Options to hide:
nationalilty.options[1].style.display = "none"; // Italian
// etc.
// Options to show:
nationalilty.options[4].style.display = ""; // British
// etc.
break;
// etc.
}
switch(nationalilty.value){
case "british":
// Options to hide:
unit.options[6].style.display = "none"; // Kilometer
// etc.
// Options to show:
unit.options[1].style.display = ""; // League
// etc.
// etc.
}
}
// Restrict on the page load as well:
restrictDropDownLists();
</script>
</body>
</html>