时间戳

首页 > 解决方案 > 从数据列表中选择一个选项并将索引号与第二个数据列表中的另一个选项进行比较

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

问题描述

对不起，令人困惑的标题。我所拥有的是两个相邻的表格列，每个列都是 datalists 。一个是学校提供的课程名称列表，另一个是课程的相应目录号。

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

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

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

标签： javascripthtmlhtml-tabledatalist

解决方案

如果两个数组在相同的索引中都有相应的值，您可以在每个下拉列表的 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;
 }

推荐阅读