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

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" >
    <thead>
        <th>id</th>
        <th>option</th>
    </thead>
    <tbody>
        <tr>
            <td >1</td>
            <td>
                <select  name="option">
                    <option value="0">Please Choose...</option>
                    <option value="y">Yes</option>
                    <option value="n">No</option>
                </select>
            </td>
        </tr>
        <tr>
            <td >2</td>
            <td>
                <select  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

CodePudding user response：

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

CodePudding user response：

.parent() will return the immediate parent while you need to go to parent <tr> and then find the data of corresponding sorting <td>.
As well as its .text() not .val() (because its <td>)

You can use multiple options to do so, some of them are used in the below code: (.siblings(),.prev())

$(document).ready(function() {
  $("#clients").on("change", ".option", function() {
    option = this.value;
    alert($(this).closest('tr').find('.sorting').text());
    alert($(this).parent().siblings('.sorting').text());
    alert($(this).parent().prev('.sorting').text()); //[recommended as less traversal happen]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients" >
  <thead>
    <th>id</th>
    <th>option</th>
  </thead>
  <tbody>
    <tr>
      <td >1</td>
      <td>
        <select  name="option">
          <option value="0">Please Choose...</option>
          <option value="y">Yes</option>
          <option value="n">No</option>
        </select>
      </td>
    </tr>
    <tr>
      <td >2</td>
      <td>
        <select  name="option">
          <option value="0">Please Choose...</option>
          <option value="y">Yes</option>
          <option value="n">No</option>
        </select>
      </td>
    </tr>
  </tbody>
  <table>