我对jquery知之甚少,所以如果我不太明白,请原谅。
我有一个表,它的行是从phpdb查询中填充的(行数会有所不同)在这种情况下有两行数据。以下是php生成的html表的一部分。
<table border=1 width=800px id=workout>
<tr>
<th width=300px id=clients>Client</th>
<th width=200px id=movements>Movements</th>
<th>X Completed</th>
</tr>
<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="1"></td>
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
<option value="select">Select...</option>
<option>Key Movement</option>
<option>Movement -1</option>
<option selected="selected" >Movement -2</option>
<option>Movement -3</option>
<option>Movement -4</option>
</select>
</td>
<td><label id="count"></label></td>
</tr>
<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="8">
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
<option value="select">Select...</option>
<option>Key Movement</option>
<option>Movement -1</option>
<option selected="selected" >Movement -2</option>
<option>Movement -3</option>
<option>Movement -4</option>
</select>
</td>
<td><label id="count"></label></td>
</tr>
我将movement
和client_id
的值传递给POST
jquery,这样我就可以对数据运行php查询并返回结果。如何根据选择菜单所在的行传递所选移动和client_id的值。
例如:如果用户更改第二行的移动下拉菜单,我想将client_id
和selected>Movement<
发送到jQuery函数。现在它刚刚进入我桌子的第一排,仅此而已。
这是我编辑的jQuery:
编辑:
<script type="text/javascript">
var typeval,clientval, class_id;
$('.typeval').on('change', function(){
movement = $(".typeval option:selected").val();
client_id = $(this).parents('tr').find('input.clientval').val();
class_id = $(<? echo $class_id; ?>).val();
//console.log($(this).parents('tr').find('input.clientval').val(), $(this).val());
$.ajax(
{ url: "movement_count.php",
type: "post",
data: {typeval:typeval, client_id: clientval, class_id :},
dataType: "json",
});
success: (function(output) {
alert(output);
$(".count").html(output);
})
});
</script>
由于您使用的是jQuery,我会这样做。删除内联JavaScript并绑定到select元素的change事件。
var typeval,clientval;
$('select.typeval').change(function() {
//console.log($(this).parents('tr').find('input').val(), $(this).val());
typeval = $(this).val();
clientval = $(this).parents('tr').find('input').val();
});
$(this).parents('tr').find('input').val();
//将为您提供客户端id$(this).val();
//将为您提供所选项目的值
然后,您可以将这些值放入AJAX调用中。
jsFiddle示例
好吧,您需要执行以下操作:
1.删除所有onchange='changeMovement()'
,您将不再需要它们。
2。仅echo
来自PHP的class_id
。
3。修复获得client_id
的方式,如下所示。
代码:
$(document).ready(function() {
$('.typeval').change(function() {
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <?php echo $class_id; ?>;
/* Do your AJAX call here */
});
});
使用php为选择和输入元素提供一个唯一的id。类似于:
<input type="hidden" id="client_id$client_id" ...
<select name="movement[]" id="mov$client_id" ...
然后,在您的javascript函数中,使用php包含client_id,如下所示:
changeMovement(client_id)
然后您可以使用client_id来更改如下所示的任何移动:
var client = $("#client_id"+client_id).val();
var movement = $("#mov"+client_id).val();
对于唯一ID,您可能希望使用填充每行隐藏输入的值字段的任何变量。我这么说是因为我不知道这些数字的确切来源。
使用James的解决方案,它看起来像这样:
那么jquery看起来是这样的:
var移动=this.valuevar client_id=this.parent().find(".clientval")
检查这个工作示例。。http://jsfiddle.net/sushanth009/BZ5Wt/
您可以使用此行获取所选行的ClientId。。
var client = $(this).parent().parent().find('.clientval').val();