[英]How to pass the id name to the jquery on the dropdown change?
我正在做的是,当用户更改下拉列表时,我将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>
逻辑的主要问题是,您要定位的元素不是#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.