在下拉查找所選選項的值

Question

我有以下HTML標記：

<table> 
    <tr> 
     <th><label>Item Name</label></th> 
     <th><label>Quantity</label></th> 
    </tr> 
    <tr> 
     <td><input type="text" class="itemized-list-item" size="20"/></td> 
     <td><select> 
       <option class="quantity" value="1">1</option> 
       <option class="quantity" value="2">2</option> 
       <option class="quantity" value="3">3</option> 
       <option class="quantity" value="4">4</option> 
       <option class="quantity" value="5">5</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="text" class="itemized-list-item" size="20"/></td> 
     <td><select> 
       <option class="quantity" value="1">1</option> 
       <option class="quantity" value="2">2</option> 
       <option class="quantity" value="3">3</option> 
       <option class="quantity" value="4">4</option> 
       <option class="quantity" value="5">5</option> 
      </select> 
     </td> 
    </tr> 
</table> 

我嘗試以下的輸入類型，並在下拉列表中選擇數量選項來獲得該項目價值：

var quantity; 
var item; 
$('.itemized-list-item').each(function() { 
    item = $(this).val(); 
    quantity = $(this).next('.quantity:selected').attr('value'); 
} 

我得到的項目值，但沒有選定的選項。

我已經嘗試了許多方法幾個小時，但無濟於事。我希望有人能夠清楚我的錯在哪裏。

乾杯， 導航

Answer 1

如果你通過輸入，其中一個方法來獲取相關的選擇元素將循環是從當前輸入到瀏覽了最接近的TR，然後回落到選擇：

var quantity; 
var item; 
$('.itemized-list-item').each(function() { 
    item = $(this).val(); 
    quantity = $(this).closest('tr').find('select').val(); 
    // do something with item and quantity 
}); 

您使用的.next('.quantity:selected')沒有工作，因爲我.next() thod不搜索文件尋找下一個匹配元素，它只是選擇緊接着的下一個兄弟如果有一個，它匹配你提供的選擇，否則什麼都不選。

Answer 2

試試這個：

var quantity; 
var item; 
$('.itemized-list-item').each(function() { 
    item = $(this).val(); 
    quantity = $(this).parent().next.find('.quantity:selected').attr('value'); 
} 

Answer 3

var quantity, 
    item; 

$('.itemized-list-item').each(function() { 
    item = this.value; 
    quantity = $(this).parent().next().find('select').val(); 
});