我怎样才能得到我点击框最近元素的选定选项？

Question

我想提醒我单击该框的容器的选定 vat 选项。但我得到一个未定义的结果：

$(document).on('click', '.box', function(event) {
  var result = $(this).closest('.container').find('.vat').find("option:selected").val();
  alert(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr class='container'>
  <td>
    <div class="box">box1</div>
  </td>
  <td>
    <select class='vat'>
      <option value='0'>0 %</option>
      <option selected value='7'>7 %</option>
      <option value='19'>19 %</option>
    </select>
  </td>
</tr>

<tr class='container'>
  <td>
    <div class="box">box2</div>
  </td>
  <td>
    <select class='vat'>
      <option value='0'>0 %</option>
      <option value='7'>7 %</option>
      <option selected value='19'>19 %</option>
    </select>
  </td>
</tr>

Answer 1

您的 jQuery 代码工作正常，问题是因为您的 HTML 无效。您缺少 tr 周围的 <table /> 元素，因此布局在呈现时被破坏。

但是请注意，您不需要 .find('option:selected')，因为您可以从 select 元素直接获得 val()。试试这个：

$(document).on('click', '.box', function(event) {
  var result = $(this).closest('.container').find('.vat').val();
  alert(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr class='container'>
    <td>
      <div class="box">box1</div>
    </td>
    <td>
      <select class='vat'>
        <option value='0'>0 %</option>
        <option selected value='7'>7 %</option>
        <option value='19'>19 %</option>
      </select>
    </td>
  </tr>
  <tr class='container'>
    <td>
      <div class="box">box2</div>
    </td>
    <td>
      <select class='vat'>
        <option value='0'>0 %</option>
        <option value='7'>7 %</option>
        <option selected value='19'>19 %</option>
      </select>
    </td>
  </tr>
</table>

我怎样才能得到我点击框最近元素的选定选项？

How can I get the selected option of the closest element of my clicked box?

jquery

select

closest