Как передать имя идентификатора в jquery при раскрывающемся списке изменений?

Question

Что я делаю, когда пользователь изменяет выпадающий список, тогда я отправляю имя идентификатора в jquery, но мой идентификатор выходит за пределы td. Как я могу получить его в JQuery? Я попробовал какой-то код, но я получаю "[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);
});

Весь код здесь

<?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 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

Основная проблема с вашей логикой заключается в том, что элемент, на который вы хотите нацелиться, не является родственным братом родительского элемента выбора #DurationN. Вам нужно исправить логику обхода DOM.

Также обратите внимание, что вы в настоящее время создаете объект jQuery, извлекаете элемент из него и снова превращаете его обратно в объект jQuery, который является избыточным. Если вам нужно свойство id элемента, вы можете использовать prop(). Попробуйте это:

$('[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>

Стоит также отметить, что добавочные атрибуты id являются антишаблоном. Я бы предложил вместо этого использовать общие классы:

$('.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>