Javascript 如何根据另一个下拉列表'；谁的选择？

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

<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个数组中的一个动态填充第二个下拉列表

是否有一个内置函数可以检查第一个下拉列表中的选择？如果是这样的话，我该如何捕捉选择

---

提前谢谢你。

好的，多亏了特里和一些研究，我现在可以看到如何开始这项工作了

        <script>

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

        </script>

var a=document.getElementById（'selectGroup'）；
a、 addEventListener（'change'，function（）{
警报（该值）；
}，假）；

添加上述内容将侦听第一个下拉列表中的选择并捕获所选的值。在这个例子中，我有一个关于所选内容的简单警告。现在，我将用代码替换它，根据选择选择一个数组，然后用代码填充第二个列表中的选定数组

---

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

好的，多亏Terry和一些研究，我现在可以了解如何开始这方面的工作

        <script>

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

        </script>

var a=document.getElementById（'selectGroup'）；
a、 addEventListener（'change'，function（）{
警报（该值）；
}，假）；

添加上述内容将侦听第一个下拉列表中的选择并捕获所选的值。在这个例子中，我有一个关于所选内容的简单警告。现在，我将用代码替换它，根据选择选择一个数组，然后用代码填充第二个列表中的选定数组

---

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

您可以创建一个映射，将组映射到其学生列表，然后将

更改

事件侦听器添加到组选择以附加正确的学生列表。我还将附加代码提取到它自己的函数中，以避免代码重复

var-groupSelect=document.getElementById（'selectGroup'）；
var studentSelect=document.getElementById（'selectStudent'）；
var groupOptions=['group1'，'group2'，'group3']；
var studentList1=['group1student1'，'group1student2'，'group1student3']；
var studentList2=['group2student1'，'group2student2'，'group2student3']；
var studentList3=['group3student1'，'group3student2'，'group3student3']；
//按名称将组映射到相应的学生列表
变量组映射={
“组1”：学生列表1，
“第2组”：学生名单2，
“第三组”：学生名单3，
};
//将选项数组附加到给定的select元素
函数附加选项（selectElement，options）{
options.forEach（（选项）=>{
const optionElement=document.createElement（'option'）；
optionElement.textContent=选项；
optionElement.value=选项；
selectElement.appendChild（optionElement）；
});
}
//附加组选项
附加选项（groupSelect、groupOptions）；
groupSelect.addEventListener（'change'，（事件）=>{
//清除学生选择仅保留占位符
studentSelect.options.length=1；
//使用映射添加学生选项
appendOptions（studentSelect，groupMapping[event.target.value]）；
});

选择一组
选一个学生
您可以创建一个映射，将组映射到其学生列表，然后将
更改
事件侦听器添加到组选择以附加正确的学生列表。我还将附加代码提取到它自己的函数中，以避免代码重复


var-groupSelect=document.getElementById（'selectGroup'）；
var studentSelect=document.getElementById（'selectStudent'）；
var groupOptions=['group1'，'group2'，'group3']；
var studentList1=['group1student1'，'group1student2'，'group1student3']；
var studentList2=['group2student1'，'group2student2'，'group2student3']；
var studentList3=['group3student1'，'group3student2'，'group3student3']；
//按名称将组映射到相应的学生列表
变量组映射={
“组1”：学生列表1，
“第2组”：学生名单2，
“第三组”：学生名单3，
};
//将选项数组附加到给定的select元素
函数附加选项（selectElement，options）{
options.forEach（（选项）=>{
const optionElement=document.createElement（'option'）；
optionElement.textContent=选项；
optionElement.value=选项；
selectElement.appendChild（optionElement）；
});
}
//附加组选项
附加选项（groupSelect、groupOptions）；
groupSelect.addEventListener（'change'，（事件）=>{
//清除学生选择仅保留占位符
studentSelect.options.length=1；
//使用映射添加学生选项
appendOptions（studentSelect，groupMapping[event.target.value]）；
});

选择一组
选一个学生
您只需将事件侦听器添加到第一个
元素，该元素侦听
更改
或
输入
事件。触发事件时，您需要清除第二个下拉列表中的所有
元素，并用所需的值填充它。谢谢！我目前正在寻找如何做到这一点，但您是否能够提供一个代码片段来提供帮助？谢谢。您只需将事件侦听器添加到第一个
元素，该元素侦听
更改
或
输入
事件。触发事件时，您需要清除第二个下拉列表中的所有
元素，并用所需的值填充它。谢谢！我目前正在寻找如何做到这一点，但您是否能够提供一个代码片段来提供帮助？非常感谢。