обновить значение поля выбора с помощью php mysql jquery ajax

Я столкнулся с серьезной проблемой при изменении status в <select> в базе данных через jqueryajax.

Примечание. Я искал в stackoverflow для этого вопроса. но те не подошли близко к моему вопросу. Вот ссылки, приведенные ниже link1 , link2 , link3

Когда я нажимаю кнопку выбора первой строки, данные отправляются через ajax, а status column in table обновляется, а также обновляется в базе данных mysql. Но когда выбирается вторая, 3-я строка, она не изменяется, а не обновляет status column на странице html, а в базе данных здесь нет выходного изображения. выходное изображение

Заранее спасибо..

Ниже приведено описание имени таблицы базы данных моего кода: ajaxselect Изображение таблицы из базы данных

HTML-файл: index.php

  <?php include('processing.php'); $newobj = new processing(); ?> <html> <head> <title>Jquery Ajax select <tag> with PHP Mysql</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <table border="1"> <tr> <th>Id</th> <th>Product name</th> <th>Status</th> <th>Action</th> </tr> <?php echo $newobj->display();?> </table> <script> $(document).ready(function(){ $("#selectstatus").change(function(){ var statusname = $("#selectstatus").val(); var getid = $("#getid").val(); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> </body> </html> в  <?php include('processing.php'); $newobj = new processing(); ?> <html> <head> <title>Jquery Ajax select <tag> with PHP Mysql</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <table border="1"> <tr> <th>Id</th> <th>Product name</th> <th>Status</th> <th>Action</th> </tr> <?php echo $newobj->display();?> </table> <script> $(document).ready(function(){ $("#selectstatus").change(function(){ var statusname = $("#selectstatus").val(); var getid = $("#getid").val(); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> </body> </html> 

Файл Ajax: ajaxreceiver.php

  <?php include('processing.php'); $newobj = new processing(); if(isset($_POST['statusname'],$_POST['getid'])){ $statusid = $_POST['statusname']; $id = $_POST['getid']; $newobj->getdata($statusid,$id); } ?> в  <?php include('processing.php'); $newobj = new processing(); if(isset($_POST['statusname'],$_POST['getid'])){ $statusid = $_POST['statusname']; $id = $_POST['getid']; $newobj->getdata($statusid,$id); } ?> 

Файл класса PHP: processing.php

  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?> в  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?> В  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?> 

Все ваши $("#selectstatus").val() имеют одинаковый идентификатор, поэтому $("#selectstatus").val() всегда возвращает одно и то же значение. Вы должны получить значение измененного элемента. Javascript: this.value или jQuery $(this).val() Пример (обратите внимание, что selectstatus – это класс, поэтому вы должны добавить новый класс): HTML

 <tr> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select status-id="<?php echo $id;?>" class="selectstatus" id="selectstatus"> <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Cancelled">Cancelled</option> <option value="Amount paid">Amount Paid</option> </select> </td> </tr> 

JS

 $(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).attr("status-id"); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); 

Вы не можете использовать идентификатор в этом случае или он будет работать только для первого появления

`

 <script> $(document).ready(function(){ $(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).parent().parent().children().eq(0).children().eq(0).val(); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> 

`