클릭 한 상자의 가장 가까운 요소에서 선택한 옵션을 어떻게 얻을 수 있습니까?

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 요소를 얻을 수 있으므로 필요하지 않습니다. 이 시도 :

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