在底部编辑注释。
我想要做的是创建一个脚本，允许我在 select 元素中查看选定的选项，并将该选择用作第二个 select< 中的选项的限制器 元素可以使用。
虽然该示例非常简单地说明了我正在谈论的内容，但实际上我将使用代码来限制更大选项列表的选项。在较大的代码中，我想获取 option_1_1 来限制从 selectElement2 到 options_2_1 到 options_2_9 的选项，option_1_2 将选择限制为 option_2_1 到 option_2_11，option_1_3 将选择限制为 option_2_1 到 option_2_5。
举个例子；
<!DOCTYPE html>
<html>
<head>
<!-- I prefer not to use PHP, but if that's the ONLY way to do it, say so. -->
<script>
/* Need script to perform */
</script>
</head>
<body>
<!-- Select element 1 -->
<select id="selectElement1">
<!-- If option_1_0 is selected, no options are available in selectElement2 -->
<option id="option_1_0" value="" selected></option>
<!-- If option_1_1 is selected, only select options are available in selectElement2 -->
<option id="option_1_1" value="1" >1</option>
<!-- If option_1_2 is selected, only select options are available in selectElement2 -->
<option id="option_1_2" value="2" >2</option>
<!-- If option_1_3 is selected, only select options are available in selectElement2 -->
<option id="option_1_3" value="3" >3</option>
</select>
<!-- Select element 2 -->
<select id="selectElement2">
<!-- Selected by default and cannot change unless a choice is selected from selectElement1 -->
<option id="option_2_0" value="" selected></option>
<!-- If option_1_1 is selected, only option_2_1 is available -->
<option id="option_2_1" value="1">1</option>
<!-- If option_1_2 is selected, only option_2_1 and option_2_2 are available -->
<option id="option_2_2" value="2" >2</option>
<!-- If option_1_3 is selected, only option_2_3 is available -->
<option id="option_2_3" value="3" >3</option>
<!-- If option_1_3 is selected, only option_2_3 and option_2_4 are available -->
<option id="option_2_4" value="4" >4</option>
</select>
</body>
</html>
编辑 谢谢你们。你们都帮了我大忙。这是最终的工作代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var gradeValue = {};
gradeValue['A'] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
gradeValue['B'] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
gradeValue['C'] = ['1', '2', '3', '4', '5'];
function changeList() {
var gradeList = document.getElementById("grade");
var rankingList = document.getElementById("ranking");
var selGrade = gradeList.options[gradeList.selectedIndex].value;
while (rankingList.options.length) {
rankingList.remove(0);
}
var rank = gradeValue[selGrade];
if (rank) {
for (var i = 0; i < rank.length; i++) {
var ranks = new Option(rank[i], i);
rankingList.options.add(ranks);
}
}
}
</script>
</head>
<body>
<select id="grade" onchange="changeList()">
<option value="">-- Select --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="ranking"></select>
</body>
</html>
最佳答案
你可以尝试这样的事情。
var selectOne = document.getElementById('selectElement1'),
selectTwo = document.getElementById('selectElement2'),
//set up options (key is equal to the value of the option in selectElement1)
optsList = {
1: ['option_2_1', 'option_2_2', 'option_2_3', 'option_2_4'],
2: ['option_2_5', 'option_2_6', 'option_2_7', 'option_2_8'],
3: ['option_2_9', 'option_2_10', 'option_2_11', 'option_2_12']
};
//add an event listener for the onchange event
selectOne.onchange = function (e) {
var selectedOpt = this[e.target.selectedIndex],
optListSet = optsList[selectedOpt.value] || 0;
//disable all options.
for(var i=0; i < selectTwo.length; i++){
selectTwo[i].disabled = "disabled";
}
//reset selected option
selectTwo.children[0].selected = "selected";
//loop through the options set corresponding to the value of the selected option
if(optListSet){
for (var i = 0; i < optListSet.length; i++) {
opt = document.getElementById(optListSet[i]);
opt.disabled = false;
}
}
//enable options list 2
selectTwo.disabled = false;
};
这是 jsfiddle
关于javascript - 如何创建一组依赖选择列表，其中连续列表取决于前面列表选项的选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28160901/