Выберите параметр из списка данных и сравните порядковый номер с другим параметром во втором списке данных. - PullRequest
Новая
       12

Выберите параметр из списка данных и сравните порядковый номер с другим параметром во втором списке данных.

0 голосов
/ 02 июля 2018

Извините за запутанный заголовок. То, что у меня есть, это два столбца таблицы рядом друг с другом, и в каждом есть списки данных. Один из них представляет собой список названий курсов, предлагаемых в школе, а другой - соответствующие номера каталогов для курсов.

Я хочу, чтобы студенты могли выбрать название курса, и он автоматически отобразит номер каталога в следующем столбце, или они могут выбрать номер каталога, и он отобразит название курса в предыдущем столбце.

Как мне настроить эти данные в настоящее время, это 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>

Я подумал, что, возможно, я смогу запустить сценарий, который просматривал бы индексный номер выбранной опции в одном массиве и извлекал тот же индексный номер из другого массива, но я не могу заставить его работать.

1 Ответ

0 голосов
/ 02 июля 2018

Если оба массива будут иметь соответствующие значения в одних и тех же значениях, вы можете просто сделать это в событиях onchange для каждого раскрывающегося списка:

Боковой список данных примечаний не поддерживается в Safari или IE версии <= 9, возможно, потребуется изменить элемент select: </p> 

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