Как правильно сделать select зависящий от select?

Question

holllop @holllop

JavaScript

Как правильно сделать select зависящий от select?

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

<table id="info_contract">
    <tr>
      <th class="first_row"></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <!-- остальные ячейки без select -->
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
    </tr>
    <tr>
      <td class="first_row"></td>
      <td>
        <select id="select1" onchange="updateOptions()">
          <option value="option1">Вариант 1</option>
          <option value="option2">Вариант 2</option>
        </select>
      </td>
      <td>
        <select id="select2">
          <!-- Варианты выбора будут обновляться в зависимости от выбора первого селекта -->
        </select>
      </td>
    </tr>
  </table>

Как вы видите, я не придумал как должен выглядеть <select id="select2">, но придумал вот такой скрипт

function updateOptions() {
    let firstSelect = document.getElementById("select1");
    let secondSelect = document.getElementById("select2");

    let selectedValue = firstSelect.value;

    // Очищаем список второго селекта
    secondSelect.innerHTML = "";

    // Добавляем новые варианты выбора во второй селект, в зависимости от выбранного значения первого селекта
    if (selectedValue === "option1") {
      let option1 = document.createElement("option");
      option1.value = "да";
      option1.text = "Да";
      secondSelect.add(option1);

      let option2 = document.createElement("option");
      option2.value = "нет";
      option2.text = "Нет";
      secondSelect.add(option2);
    } else if (selectedValue === "option2") {
      let option1 = document.createElement("option");
      option1.value = "1";
      option1.text = "1";
      secondSelect.add(option1);

      let option2 = document.createElement("option");
      option2.value = "2";
      option2.text = "2";
      secondSelect.add(option2);
    }
}

и понял что с дальнейшим увеличением количества select этот код превратится в бред. Но долго думал как реализовать на джаве без библиотек вроде бы, кажется не так сложно всего лишь <select id="select2"> будет зависеть только от <select id="select1">, а <select id="select3">, только от <select id="select2">, итд. Да я знаю про библиотеку Select2. Но я подумал, может что-то ещё нужно использовать, или по другому можно ка-то сделать ? И мне интересно насколько сложно будет продумать AJAX Post-запрос для такой таблицы ?