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

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

1 个答案: