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

Question

抱歉，标题令人困惑。我有两个 table 列彼此相邻，每个列中都有 datalists 。一个是学校开设的课程名称列表，另一个是课程对应的目录号。

我想要发生的是学生可以 select 课程标题，它会自动在下一列中显示目录号，或者他们可以 select 目录号，它会显示上一栏中的课程名称。

我目前如何设置此数据是 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>

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

Answer 1

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

Safari 或 IE 版本 <= 9 不支持旁注数据列表，可能需要更改为 select 元素：

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

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

Select an option from a datalist and compare index number to another option in a second datalist

javascript

html

html-table

datalist