使用嵌入表中的select选项，通过JQuery和AJAX将用户角色动态更改为不同的角色

Question

我试图通过在表中使用select标记来动态地允许用户更改用户角色，当更改触发事件时，该标记会在JQuery中记录更改，并通过AJAX将更改发送到PHP。从所附的图像中，唯一触发事件的select标记是所示表格第一行中的标记。对其他行所做的任何更改都不会触发一个事件，如带有console.log信息的图像所示。我试图允许任何有权更改特定用户角色的人通过在同一表行中选择adajacent select选项来更改数据库中的字段，该选项是通过AJAX发送的。我以前发布过这个问题，但韦斯利·史密斯建议我做一个新的帖子。任何人请随时发表评论。

<?php
require_once('../../private/initialize.php');
require_login();
$admins = find_all_admins();
?>
<?php
if(isset($_SESSION['message']) )
{
echo "<div> </div><h5 style="color: #08ff00">". $_SESSION['message'] ."</h5> </div>";
}
unset($_SESSION['message']);
//if(isset($SESSION['image_msg']))
//{
//    echo "<div> </div><h5 style=\" . $_SESSION['image_msg'] . "</#ffffff> </div>";
//}
?>
<form action="" method='post'>
<table class="table table-bordered table-hover">
<!--        <div id="bulkOptionContainer" class="col-xs-4">-->
<!---->
<!--            <select class="form-control" name="bulk_options" id="">-->
<!--                <option value="">Select Options</option>-->
<!--                <option value="published">Publish</option>-->
<!--                <option value="draft">Draft</option>-->
<!--                <option value="delete">Delete</option>-->
<!--                <option value="clone">Clone</option>-->
<!--            </select>-->
<!---->
<!--        </div>-->
<div class="col-xs-4" id="addnew" >
<!--            <input type="submit" name="submit" class="btn btn-success" value="Apply">-->
<a class="btn btn-primary" href="staff.php?source=add_staff">Add New</a>
</div>
<thead>
<tr>
<!--            <th><input id="selectAllBoxes" type="checkbox"></th>-->
<th>Image</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Role</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php while ($all_admins = mysqli_fetch_assoc($admins)) { ?>
<tr>
<td><img src="<?php echo url_for('../images/staff/'.$all_admins['image'])?>" onerror="this.src='<?php echo url_for('../images/staff/profile.jpg') ?>'" style="border:1px solid #ddd;border-radius:2px; box-shadow: #4a5f63; height: 70px;width: 70px"></td>
<td><?php echo h($all_admins['first_name']) ?></td>
<td><?php echo h($all_admins['last_name']) ?></td>
<td><a class='btn btn-info' href="staff.php?source=show_staff&staff_id=<?php echo h($all_admins['id']) ?>"> <?php echo h($all_admins['email']) ?> </a></td>
<td>
<?php
$role = $all_admins['role'];
switch ($role){
case 'DE':
echo "Data Entry";
break;
case 'GU':
echo "General User";
break;
default:
echo "Administrator";
break;
}
?>
<span>
<select class="urole" name="role[]">
<option value="Admin" <?php echo ($role == 'Admin')?'selected':'' ?> >Admin</option>
<option value="DE" <?php echo ($role == 'DE')?'selected':'' ?> >Data Entry</option>
<option value="GU" <?php echo ($role == 'GU')?'selected':'' ?> >General User</option>
</select>
</span>
</td>
<td><a class='btn btn-info' href="staff.php?source=edit_staff&staff_id=<?php echo h($all_admins['id']) ?>">Edit</a></td>
<form method="post">
<input type="hidden" name="post_id" value="<?php //echo $post_id ?>">
<?php
echo '<td><input class="btn btn-danger" type="submit" name="delete" value="Delete"></td>';
?>
</form>
</tr>
<!---->
<!--            <td><input class='checkBoxes' type='checkbox' name='checkBoxArray[]' value='-->
<?php } //echo $post_id; ?><!--'></td>-->
<?php
mysqli_free_result($admins);
// echo "<td><a rel='$post_id' href='javascript:void(0)' class='delete_link'>Delete</a></td>";

// echo "<td><a onClick="javascript: return confirm('Are you sure you want to delete'); " href='posts.php?delete={$post_id}'>Delete</a></td>";
//            echo "<td><a href='posts.php?reset={$post_id}'>{$post_views_count}</a></td>";
//            echo "</tr>";
//}

?>

</tbody>
</table>
</form>

<?php
//if (isset($_POST['delete'])) {
//
//    $the_post_id = escape($_POST['post_id']);
//
//    $query = "DELETE FROM posts WHERE post_id = {$the_post_id} ";
//    $delete_query = mysqli_query($connection, $query);
//    header("Location: /cms/admin/posts.php");
//
//
//}
//
//
//if (isset($_GET['reset'])) {
//
//    $the_post_id = escape($_GET['reset']);
//
//    $query = "UPDATE posts SET post_views_count = 0 WHERE post_id = $the_post_id  ";
//    $reset_query = mysqli_query($connection, $query);
//    header("Location: posts.php");
//
//
//}

?>

<script>
$(document).ready(function ()
{
// $(".delete_link").on('click', function () {
//
//
//     var id = $(this).attr("rel");
//
//     var delete_url = "posts.php?delete=" + id + " ";
//
//
//     $(".modal_delete_link").attr("href", delete_url);
//
//
//     $("#myModal").modal('show');
//});
$('.urole').on('change',function (e){
e.preventDefault();
var val = $(".urole option:selected").val();
console.log(val);
console.log(e);
// $("#urole").on('click', function(){
//     v
// });
//displayData(val);
});
$("#urole").ready(function (){
var val = $("#urole option:selected").val();
console.log(val);
//displayData(val);
});
});
function displayData(query){
$.ajax({
url:"enrolled_learners/enrol_learner_provider.php",
method:"post",
data:{query:query},
success:function (data)
{
//console.log(data);
$('#q-provider').html(data);
}
});
}

<?php
//if (isset($_SESSION['message'])) {
//
//        unset($_SESSION['message']);
//
//    }
?>

</script>
User Interface and Console log[enter image description here][1]
[User Interface][1]

Answer 1

您的选择器选择所有具有类urole的元素，您只想选择已更改的元素，因为您在该元素的更改处理程序中，可以通过this关键字访问它。

$('.urole').on('change',function (e){
e.preventDefault();
var val = this.value;
console.log(val);
console.log(e);
displayData(val);
});