Javascript 从数据列表中选择一个选项，并将索引号与第二个数据列表中的另一个选项进行比较

对不起，标题很混乱。我有两个相邻的表列，每个表列中都有数据列表。一个是学校提供的课程名称列表，另一个是课程的相应目录号

我想让学生们选择课程名称，它会在下一列中自动显示目录号，或者他们可以选择目录号，它会在上一列中显示课程名称

我目前如何设置此数据是两个独立的阵列，如下所示：

<td>
    <input list="courses" name="course" placeholder="Course" onchange="indexTest()">
      <datalist id="courses">
       <!--Filled in script-->
      </datalist>
</td>
<td>
    <input list="catalogs" name="catalog" placeholder="Catalog Number">
      <datalist id="catalogs">
       <!--Filled in script-->
      </datalist>
</td>

    <script>
        var course = ["class 1","class 2","class 3","class 4","class 5"];
        var list = document.getElementById('courses');

        courseNames.forEach(function(item){
          var option = document.createElement('option');
          option.value = item;
          list.appendChild(option);
        });
    </script>

    <script>
        var catalog = ["catalog 1", "catalog 2","catalog 3","catalog 4","catalog 5"];
        var list = document.getElementById('catalogs');

        catNumbers.forEach(function(item){
          var option = document.createElement('option');
          option.value = item;
          list.appendChild(option);
    });
    </script>

var课程=[“一级”、“二级”、“三级”、“四级”、“五级”]；
var list=document.getElementById（'courses'）；
courseNames.forEach（功能（项目）{
var option=document.createElement（'option'）；
option.value=项目；
列表。追加子项（选项）；
});
变量目录=[“目录1”、“目录2”、“目录3”、“目录4”、“目录5”]；
var list=document.getElementById（'catalogs'）；
catNumbers.forEach（功能（项目）{
var option=document.createElement（'option'）；
option.value=项目；
列表。追加子项（选项）；
});

---

我想我可能可以运行一个脚本，在一个数组中查找所选选项的索引号，然后从另一个数组中提取相同的索引号，但我似乎无法使其正常工作。

如果两个数组在相同的索引中都有相应的值，您可以在每个下拉列表的onchange事件中执行此操作：

---

旁注：Safari或IE版本不支持datalist，这太棒了！select元素的唯一问题是它似乎不允许人们键入他们的选择并动态更新列表以匹配他们的输入。这些列表将包含数百个类，我不特别希望人们在几年内滚动。@Doodlebug您可以将事件附加到输入框中，然后过滤您的下拉列表，因此对于input name=“course”，您可以为onkeyup添加一个事件，并编写一个函数，该函数接受输入中的值并过滤下拉列表。

<select id="courses" onchange="UpdateFromCourses()">

</select>

//Just make another function like this doing 
//the same thing but to the other drop down

 function UpdateFromCourses(){
    const selIndex = document.getElementById('courses').selectedIndex;
    document.getElementById('catalogs').selectedIndex = selIndex;
 }