クリックしたボックスの最も近い要素の選択したオプションを取得するにはどうすればよいですか？

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')は、val()ストレートフォームのselect要素を取得できるため、必要ありません。 O/pが動作していない

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