时间戳

首页 > 解决方案 > 如何找到嵌套在元素内的下一个选择下拉菜单？

javascript - 如何找到嵌套在元素内的下一个选择下拉菜单？

问题描述

我试图找到嵌套在另一个 div 中的下一个选择下拉菜单。

我尝试了几种不同的方法但是由于某种原因我的代码总是返回未定义。

这样做的原因是如果在第一个选择下拉列表中选择了某些值，则更改下一个下拉列表的值。

这是我的代码：

$(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();

标签： javascriptjquery

解决方案

您的更改处理程序绑定到 select 元素，因此您需要将 DOM 上移到.fromdiv，然后到.todiv 下一个兄弟，然后通过以下方式下到选择：

$(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>

推荐阅读