如何將ID名稱傳遞給下拉更改中的jquery？

Question

我正在做的是，當用戶更改下拉列表時，我將ID名稱發送到jquery，但是我的ID不在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選擇的父級的#DurationN 。 您需要修復DOM遍歷邏輯。

還要注意，您當前正在創建一個jQuery對象，從中檢索Element，然后再次將其轉回到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>