Как найти следующий выпадающий список, вложенный в элемент?

Question

Я пытаюсь найти следующий выпадающий список, вложенный в другой div.

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

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

Это мой код:

$(document).on('change', '.from select', function(e) {
  console.log($(this).closest('div.to').next('.smallSelect').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="hours" id="">

  <div class="from">
    <select class="smallSelect">
      <option value="">Select</option>
      <option value="CLOSED">CLOSED</option>
      <option value="00:00">12.00 AM</option>
      <option value="00:30">12.30 AM</option>
    </select>
  </div>

  <div class="to">
    <select class="smallSelect">
      <option value="">Select</option>
      <option value="CLOSED">CLOSED</option>
      <option value="00:00">12.00 AM</option>
      <option value="00:30">12.30 AM</option>
    </select>
  </div>
  
</div>

Может кто-нибудь дать совет по этому вопросу?

Я также пробовал это, который не работал:

$(this).parents(".to").find(".select").val(); 

Answer 1

Ваш обработчик изменений привязан к элементу select, поэтому вам нужно поднять DOM до .from div, затем до .to div следующего брата, затем вниз до select через:

$(this).parent().next().find('.smallSelect').val()

$(document).on('change', '.from select', function(e) {
  console.log($(this).parent().next().find('.smallSelect').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="hours" id="">

  <div class="from">
    <select class="smallSelect">
      <option value="">Select</option>
      <option value="CLOSED">CLOSED</option>
      <option value="00:00">12.00 AM</option>
      <option value="00:30">12.30 AM</option>
    </select>
  </div>

  <div class="to">
    <select class="smallSelect">
      <option value="">Select</option>
      <option value="CLOSED">CLOSED</option>
      <option value="00:00">12.00 AM</option>
      <option value="00:30">12.30 AM</option>
    </select>
  </div>

</div>