Question

I know this is probably an easy one but I can’t figure it out. I need to create cascading select boxes but I don’t know how to reference the target select box that is 3 over from the calling select. I’ve tried:

$(this).next().next().next().html(data)

But that doesn’t work. I suspect it has something to do the children of the parent.

EDIT: Here is the HMTL

<table id="invoiceTable">
<tr>
    <th></th>
    <th class="productColumn">Product</th>
    <th class="lotColumn">Lot #</th>
    <th class="wheelColumn">Wheel #</th>
    <th class="packageType">Pkg Type</th>
    <th class="quantityField">Weight</th>
    <th class="priceColumn">Price</th>
    <th class="subTotalColumn">Subtotal</th>
    <th class="soldOut">Sold Out</th>
</tr>
<?php
if(!$newInvoice){ $rowNum = 0;
    foreach($details as $detail){ /* @var $detail Creamery_Invoice_details */?>


<tr>
    <td><button type="button" class="delete">D</button></td>
    <td class="productColumn">

        <select name="productInputName[]" class="productSelect" id="cheeseName">
            <option></option>

        </select>

    </td>

    <td>
        <select name="lotNumber[]" class="lotNumber" >
            <option value=0>Lot #</option>

        </select>
    </td>
    <td>
        <select name="wheelNumber[]" class="wheelNumber">
            <option value=0>Wheel</option>

                </select>

            </td>


            <td>
            <select name="packageType[]" class="packageType">
            <option value=0>Pkg Type</option>

        </select>
    </td>

    <td class="quantityField"><input name="quantity[]" type="number"> <?php echo ' value="',$detail->getQuantity(),'"';   ?>></td>
    <td class=priceField><input name="price[]" type="number" step="any">

    </td>
    <td class="subtotalField"><input type="number" step="any" readonly="readonly"></td>
    <td class="soldOut"><input type="checkbox" name="soldOut[]" <?php if($detail->getSoldOut()){echo 'checked="checked"';} ?> ></td>

</tr>

EDIT 2: I just wanted to add, in case someone else comes across this, that $(this).whatever doesn’t work because it is in the ajax call I need to do it like this:

$(".productSelect").change(function(){
    var product = this;
    $.get("/path to php file", 'type='+$(this).val(),function(data){
        $(product).closest('tr').find('.lotNumber').html(data);
    })
});

Answer 1

You can use the class of the 3rd select from productSelect which is packageType.

See below,

$(this).closest('tr').find('.packageType').html(data)