如何创建一组从属选择列表，其中连续列表依赖于前面列表选项的选择

How can I create a set of dependent select lists where successive lists depend on the choice of preceding list choices?

本文关键字：列表 选择 连续 前面 依赖于 选项 创建 何创建 一组      更新时间：2023-09-26

编辑底部的注释。

我要做的是创建一个脚本，该脚本允许我查看select元素中的选定选项，并将该选择用作第二个select元素中的选项可以使用的限制器。

虽然该示例显示了我所谈论内容的非常简单的说明，但我实际上将使用代码来限制较大选项列表的选项。在更大的代码中，我想让option_1_1将选项从selectElement2限制为通过options_2_9 options_2_1，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

在菜单上添加更改侦听器。然后使用 disabled 属性来防止选择不需要的选项：

var suffix = jQuery(selectedOption).attr("id").split("_")[2]; // for option_2_3, this hsould be "3"
// loop through all option elements, add a css class to differentiate them from other options.
for(...) {
    // test if the id matches
    var currentIdSuffix = jQuery( currentOption ).attr("id").split("_")[2];
    if( currentIdSuffix != suffix ) {
        // add disabled attribute = prevents selection
        jQuery( currentOption ).attr("disabled", "disabled");
    }
}
相关文章：