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选择项的父级的同级。您需要修复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>

如何将ID名称传递给下拉更改中的jquery？

1 个答案: