從數據列表中選擇一個選項，並將索引號與第二個數據列表中的另一個選項進行比較

Question

抱歉，標題令人困惑。 我所擁有的是兩個彼此相鄰的表列，每個列中都有一個datalist。 一個是學校提供的課程名稱列表，另一個是課程的相應目錄編號。

我想發生的是，學生可以選擇課程標題，它將自動在下一列中顯示目錄編號，或者他們可以選擇目錄編號，並且將在前一列中顯示課程標題。

我目前如何設置此數據是2個單獨的數組，如下所示：

<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>

我以為我可以運行一個腳本，該腳本在一個數組中查找所選選項的索引號，然后從另一個數組中提取相同的索引號，但是我似乎無法正常工作。

Answer 1

如果兩個數組在相同的衰變中都具有對應的值，則可以在每個下拉列表的onchange事件中執行此操作：

Safari或IE版本<= 9不支持旁注數據列表，可能想更改為選擇元素：

<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;
 }