Обход строк таблицы и отключение ввода во втором столбце

Question

пожалуйста, посмотрите на приведенный ниже код.

<table>
 <tr>
     <td>
          <select name='td1'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
     <td>
          <select name='td2'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
  </tr>


</table>

JavaScript:

<script>
document.getElementsByTagName("tr").each(function(){
   $(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>

Требование 1. По умолчанию поле выбора во втором столбце (т. Е. Выбор второго тд) должно быть отключено. 2. второе поле выбора может быть включено только тогда, когда пользователь выбирает третью опцию в первом поле выбора. 3. решение должно быть в чистом javascript (без использования jquery)

Заранее спасибо.

Answer 1

Array.from(document.querySelectorAll('tr')).forEach(tr => {
    const secondSelect = tr.children[1].querySelector('select');
    secondSelect.disabled = true;
    tr.querySelector('td select').addEventListener('change', function() {
        secondSelect.disabled = (this.value != 3);
    });
});

Answer 2

Этот код будет работать только для одной строки с двумя вариантами выбора, что идеально подходит для вашего примера.

var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
    selectTag[1].disabled = true;  
    selectTag[0].addEventListener("change", function(){
      if(selectTag[0].value == 3){
        selectTag[1].disabled = false;
      }
      else{
        selectTag[1].disabled = true;
      }
    });

Answer 3

для отключения select вам просто нужно добавить атрибут disabled, используя setAttribute или element.disabled = true, затем прослушайте изменение другого выбора и проверьте его значение, если оно равно 3, удалить disabled,

let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;

let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {

  if (+this.value === 3) // the + sign is a shorthand for parseInt
    td2.disabled = false ;
  else
    td2.disabled = true ;
})

<table>
  <tr>
    <td>
      <select name='td1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
      </select>
    </td>
    <td>
      <select name='td2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
      </select>
    </td>
  </tr>


</table>