Отображение выпадающего списка в той же/конкретной строке на основе выбора из другого выпадающего списка

Вопрос или проблема

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});

<tr>
  <th id="remarkshead">Выберите замечания</th>
  <th>
  </th>
</tr>

<tr>

  <td>
    <select name="yesReason">
      <option value="">Выберите</option>
      <option value="Yes" id="yes">ДА</option>
      <option value="No" id="no">НЕТ</option>
    </select>
  </td>


  <td id="showYesReason" class="Yes Box">

    <select name="yesreason">
      <option value="022">Причина Да</option>
      <option value="024">ДА</option>

    </select>

  </td>

  <td id="showNoReason" class="No Box">

    <select name="Noreason">
      <option value="025">Причина Нет</option>
      <option value="026">НЕТ</option>
    </select>
  </td>

</tr>

Ответ или решение

Для решения вашей задачи нужно изменить ваш текущий код jQuery так, чтобы он работал только с конкретными строками таблицы, а не со всем документом. Это можно сделать, ограничив поиск элементов внутри контейнера, который вы хотите контролировать.

Вот исправленный код:

<table>
  <tr>
    <th id="remarkshead">Выберите замечания</th>
    <th></th>
  </tr>
  <tr>
    <td>
      <select class="trigger-dropdown">
        <option value="">Выберите</option>
        <option value="Yes">ДА</option>
        <option value="No">НЕТ</option>
      </select>
    </td>
    <td class="Yes Box" style="display:none;">
      <select name="yesreason">
        <option value="022">Причина ДА</option>
        <option value="024">ДА</option>
      </select>
    </td>
    <td class="No Box" style="display:none;">
      <select name="Noreason">
        <option value="025">Причина НЕТ</option>
        <option value="026">НЕТ</option>
      </select>
    </td>
  </tr>
</table>

А вот и исправленный код jQuery:

$(document).ready(function() {
  $("select.trigger-dropdown").change(function() {
    // Получаем значение выбранного элемента
    var optionValue = $(this).val();
    // Находим родительский tr для текущего dropdown
    var currentRow = $(this).closest('tr');

    // Скрываем все дополнительные dropdown в текущей строке
    currentRow.find(".Box").hide();

    // Показываем соответствующий элемент в текущей строке
    if (optionValue === "Yes") {
      currentRow.find(".Yes").show();
    } else if (optionValue === "No") {
      currentRow.find(".No").show();
    }
  });
});

Объяснение кода:

1. HTML:

   • Мы добавили класс trigger-dropdown к выбору "ДА"/"НЕТ", чтобы легко ссылаться на него в jQuery.
   • Элементы, которые должны отображаться в зависимости от выбора, имеют классы "Yes" и "No" и изначально скрыты с помощью стиля display:none;.

2. jQuery:

   • Сначала мы получаем выбранное значение в optionValue.
   • Используя closest('tr'), мы находим текущую строку таблицы, в которой находится выпадающий список.
   • Скрываем все элементы с классом .Box в этой строке, чтобы избежать отображения ненужных элементов.
   • В зависимости от значения, которое было выбрано, мы отображаем соответствующий элемент.

Таким образом, при выборе "ДА" или "НЕТ" выпадающие списки с причинами будут показываться только в той строке таблицы, где происходит выбор.