为什么Jquery父子选择器返回undefined

为什么jquery父子选择器在这里不起作用：

$(document).on('change', 'select[name="slct_sec"]', function() {
  var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
  console.log(cls_1);
  var cls_1_bis = $(this).parent().siblings().find('select[name="slct_cls"]').val();
  console.log(cls_1_bis);
});

$("#productTableServerSide").on('change', '.server-dropdown', function(event) {
  //ancienne valeur
  var oldValue = $.data(this, 'itemValue');
  //nouvelle valeur
  var newValue = $(this).val();
  console.log('break1');
  //not working
  var itemName = $(this).closest('tbody').find('.col-name').val();
  console.log('itemName : ', itemName);
  //not working 
  var itemName1 = $(this).parent().children('.col-name').val();
  console.log('itemName1 : ', itemName1);
  //not working 
  var itemName2 = $(this).parent().siblings().find('select[name="values"]').val();
  console.log('itemName2 : ', itemName2);
  //not working 
  var itemName3 = $(this).parent().children('.col-name').find('select[name="values"]').val();
  console.log('itemName3 : ', itemName3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example from Internet which is working</p>
<article>
  <section>
    <select name='slct_cls'>
      <option value='1'>One</option>
      <option value='2'>Two</option>
    </select>
  </section>
  <br/>
  <section>
    <select name='slct_sec'>
      <option value='1'>A</option>
      <option value='2'>B</option>
    </select>
  </section>
</article>
<br/>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
  <thead class="thead-dark text-white">
    <tr>
      <th>Check</th>
      <th>#</th>
      <th>The product name</th>
      <th>The product value</th>
      <th>Dropdown</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="col-checkbox sorting_1">
        <input id="check0" type="checkbox" class="server-checkbox">
      </td>
      <td class=" col-action">
        <a href="/Data/Product/0">Action</a>
      </td>
      <td class=" col-name">item 0</td>
      <td class=" col-value">3</td>
      <td class=" col-dropdown">
        <select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3" selected="">3</option>
          <option value="4">4</option>
          <option value="2130554612">2130554612</option>
        </select>
      </td>
    </tr>
    <tr role="row" class="even">
      <td class="col-checkbox sorting_1">
        <input id="check1" type="checkbox" class="server-checkbox">
      </td>
      <td class=" col-action">
        <a href="/Data/Product/1">Action</a>
      </td>
      <td class=" col-name">item 1</td>
      <td class=" col-value">1436184776</td>
      <td class=" col-dropdown">
        <select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="1436184776" selected="">1436184776</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

我用了一个例子：Jquery选择了一个对我不起作用的父母-孩子

console.log返回undefined=>这意味着变量要么是未定义的，要么是其他

你能帮我吗？

$("#productTableServerSide").on('change', '.server-dropdown', function (event) {
            //ancienne valeur
            var oldValue = $.data(this, 'itemValue'); 
            //nouvelle valeur
            var newValue = $(this).val();
            console.log('break1');
            
            //working 
            var itemName = $(this).closest('tr').find('.col-name').text();
            console.log('itemName : ', itemName);
            alert(itemName);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>My Example</p>
    <table id="productTableServerSide" class="table table-bordered" style="width:100%;">
        <thead class="thead-dark text-white">
            <tr>
                <th>Check</th>
                <th>#</th>
                <th>The product name</th>
                <th>The product value</th>
                <th>Dropdown</th>
            </tr>
        </thead>
        <tbody>
         <tr role="row" class="odd">
        <td class="col-checkbox sorting_1">
            <input id="check0" type="checkbox" class="server-checkbox">
        </td>
        <td class=" col-action">
            <a href="/Data/Product/0">Action</a>
        </td>
        <td class=" col-name">item   0</td>
        <td class=" col-value">3</td>
        <td class=" col-dropdown">
            <select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" selected="">3</option>
                <option value="4">4</option>
                <option value="2130554612">2130554612</option>
            </select>
        </td>
    </tr>
    <tr role="row" class="even">
        <td class="col-checkbox sorting_1">
            <input id="check1" type="checkbox" class="server-checkbox"> 
        </td>
        <td class=" col-action">
             <a href="/Data/Product/1">Action</a>
        </td>
        <td class=" col-name">item   1</td>
        <td class=" col-value">1436184776</td>
        <td class=" col-dropdown">
            <select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values"> 
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="1436184776" selected="">1436184776</option>
            </select>
        </td>
    </tr>
        </tbody>
    </table>

var itemName = $(this).closest('tbody').find('.col-name').text();