Question

我有以下代码，使用包含在数组中的项目列表填充下拉列表：

<form id="myGroupSelectForm">
    <select id="selectGroup">
        <option>Choose a Group</option>
    </select>
    <select id="selectStudent">
        <option>Choose a Student</option>
    </select>
</form>

<script type="text/javascript">
    var select = document.getElementById("selectGroup"); 
    var options = ["Group 1", "Group 2", "Group 3"]; 
    var i;

    for(i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
</script>

我还有3个数组，每个数组都包含学生列表。例如：

StudentList1 = ['student1', 'student2'...]
StudentList2 = ['student1', 'student2'...]
StudentList3 = ['student1', 'student2'...]

如何根据第一个下拉列表中的选择，动态地用这3个数组之一填充第二个下拉列表？

是否有一个内置功能可以检查第一个下拉列表中的选择？如果是这样，我如何捕获选择？

谢谢。

Answer 1

您可以创建一个映射，将组映射到他们的学生列表，然后将change事件监听器添加到所选的组以追加正确的学生列表。我还将附加代码提取到了自己的函数中，以避免代码重复。

var groupSelect = document.getElementById('selectGroup');
var studentSelect = document.getElementById('selectStudent'); 
var groupOptions = ['Group 1', 'Group 2', 'Group 3']; 
var studentList1 = ['group1student1', 'group1student2', 'group1student3'];
var studentList2 = ['group2student1', 'group2student2', 'group2student3'];
var studentList3 = ['group3student1', 'group3student2', 'group3student3'];
// maps groups by name to their corresponding student list
var groupMapping = {
    'Group 1': studentList1,
    'Group 2': studentList2,
    'Group 3': studentList3,
};
// appends an array of options to a given select element
function appendOptions(selectElement, options) {
    options.forEach((option) => {
        const optionElement = document.createElement('option');
        optionElement.textContent = option;
        optionElement.value = option;
        selectElement.appendChild(optionElement);
    });
}

// append group options
appendOptions(groupSelect, groupOptions);
groupSelect.addEventListener('change', (event) => {
    // clear student select only keeping the placeholder
    studentSelect.options.length = 1;
    // append student options using the mapping
    appendOptions(studentSelect, groupMapping[event.target.value]);
});

<form id="myGroupSelectForm">
    <select id="selectGroup">
        <option disabled selected>Choose a Group</option>
    </select>
    <select id="selectStudent">
        <option disabled selected>Choose a Student</option>
    </select>
</form>

Answer 2

好的，感谢特里（Terry）和一些研究，我现在知道如何开始。

        <script>

        var a = document.getElementById('selectGroup');
        a.addEventListener('change', function() {
            alert(this.value);
            }, false);

        </script>

添加以上内容将侦听第一个下拉列表中的选择并捕获所选的值。在此示例中，我对选择的内容有一个简单的警告。我现在将其替换为代码，以根据选择内容选择一个数组，然后执行代码以使用所选数组填充第二个列表。

完成后，我将使用完整的代码编辑此响应，以查看它是否对其他人有帮助。

如何根据另一个下拉列表的选择向下拉列表动态添加数组？

2 个答案: