Question

I have the following HTML markup:

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

I tried the following to get the item value in the input type and the selected quantity option in the dropdown:

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

I get the item value but not the selected option.

I have tried many methods for hours but no avail. I hope someone can shed some light on where I am going wrong.

Cheers,
nav

Answer 1

If you’re going to loop through the inputs then one way to get the associated select elements is to navigate up from the current input to the closest tr, then back down to the select:

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

Your use of .next('.quantity:selected') didn’t work because the .next() method doesn’t search through the document looking for the next matching element, it simply selects the immediate following sibling if there is one and it matches the selector you supplied and otherwise selects nothing.