How to pass the id name to the jquery on the dropdown change?

Question

What I am doing is, When the user changes the dropdown then I am sending the id name to the jquery but my id is out of the td . How can I get it in the jQuery? I tried some code but I am getting "[object Object]."

   <?php $x=1; foreach($data as $row){?>
<tr>
  <td>
    <div>
      <select name="Duration<?php echo $x;?>" id="Duration<?php echo $x;?>">
        <option></option>
        <option></option>
      </select>
    </div>
  </td>
  <td>
    <div class="loadMe"><span id="dynamic<?php echo $x;?>"></span></div>
  </td>
  //and so on
</tr>
<?php $x++;}?>

Jquery

 $('[id^="Duration"]').change(function () {
  var Id=$($(this).parent().siblings('[id^="dynamic"]')[0]);
  alert(Id);
});

Whole code here

<?php 
$x=1;
 foreach ($MemberActivity as $activities) {
?>
 <tr>
    <td>
        <div class="">
         <input type="hidden" name="activityID" id="activityID<?php echo $x;?>" value="<?php echo $activities->activity_name_id;?>">
            <select name="Duration<?php echo $x;?>"  class="form-control" id="Duration<?php echo $x;?>" >
              <option selected disabled >Select year</option>   
              <option value="12m">1 Year</option>
              <option value="6m">6 months</option> 
            </select>
         </div>
            </td>
         <td>
            <span id="dynamic<?php echo $x;?>"><?php echo $activities_name;?></span>
          </div>
        </td>
         </tr>
 <?php $x++;}?>

script

<script type="text/javascript">
 $('[id^="Duration"]').change(function () {
   var input = $($(this).siblings('input[id^="activityID"]')[0]); // get the input element
   var activityID = input.val(); //value of the input
   var dropdownDuration = this.value;
   var results = $(this).closest('tr').find('[id^="dynamic"]').prop('id');
   alert(results);

    $.ajax({
         url: "<?php echo base_url(); ?>Member_controller/checkmember",
         method:"POST",
         data:{activityID:activityID,dropdownDuration:dropdownDuration},
         success: function(msg){
           alert($(results).html(msg));
         }
       });
    });


 </script>

Answer 1

The main issue with your logic is that the element you want to target isn't the sibling of the parent of the #DurationN select. You need to fix your DOM traversal logic.

Also note that you're currently creating a jQuery object, retrieving the Element from that then turning it back in to a jQuery object again which is redundant. If you want the id property of the element, you can use prop() . Try this:

 $('[id^="Duration"]').change(function() { var id = $(this).closest('tr').find('[id^="dynamic"]').prop('id'); console.log(id); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <div> <select name="Duration1" id="Duration1"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span id="dynamic1"></span></div> </td> </tr> <tr> <td> <div> <select name="Duration2" id="Duration2"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span id="dynamic2"></span></div> </td> </tr> <tr> <td> <div> <select name="Duration3" id="Duration3"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span id="dynamic3"></span></div> </td> </tr> </table> 

It's also worth noting that incremental id attributes are an anti-pattern. I'd suggest using common classes instead:

 $('.duration').change(function() { var dynamic = $(this).closest('tr').find('.dynamic'); dynamic.addClass('foo'); }); 

 .foo { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <div> <select name="duration[]" class="duration"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span class="dynamic">foo</span></div> </td> </tr> <tr> <td> <div> <select name="duration[]" class="duration"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span class="dynamic">foo</span></div> </td> </tr> <tr> <td> <div> <select name="duration[]" class="duration"> <option></option> <option></option> </select> </div> </td> <td> <div class="loadMe"><span class="dynamic">foo</span></div> </td> </tr> </table>