在下拉查找所选选项的值

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