how to get value of first item in table row on a rows dropdown change

I’m trying to get some data in jQuery to submit via ajax. I have a table, the first element in each row has a class of sorting and the value is the id of the client. The last element is a dropdown. When the dropdown is clicked the on change event is fired and I’m able to get the selected value of the dropdown but I’ve been struggling to get the client id value. Heres my code

<table id="clients" class="table table-striped table-bordered table-hover">
    <thead>
        <th>id</th>
        <th>option</th>
    </thead>
    <tbody>
        <tr>
            <td class="sorting">1</td>
            <td>
                <select class="option" name="option">
                    <option value="0">Please Choose...</option>
                    <option value="y">Yes</option>
                    <option value="n">No</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="sorting">2</td>
            <td>
                <select class="option" name="option">
                    <option value="0">Please Choose...</option>
                    <option value="y">Yes</option>
                    <option value="n">No</option>
                </select>
            </td>
        </tr>
    </tbody>
<table>

<script>
    $(document).ready(function() {
        $( "#clients" ).on("change", ".option", function() {
            option = this.value;
            alert( $( this ).parent().find( '.sorting' ).val() );
        });
    });
</script>

I’ve tried a few things to get this id but nothing has worked. Mainly (as in this case) the alert says undefined.

I’ve not yet done the ajax post request and I’m pretty familiar with that but there is no point if I cannot get the id that has changed value.

thanks

>Solution :

try this to be more specific to find your selector. parent() give you only one level parent element so you got td not tr. instead parent() use parents(‘tr’) to get the tr element. remember td is not having any value so you need to get the text using text() method.

<script>
$(document).ready(function() {
    $( "#clients" ).on("change", ".option", function() {
        option = this.value;
        alert( $( this ).parents('tr').find( '.sorting' ).text() );
    });
});