javascript - HTML 表格的第一行由 Ajax 更新，其他行在更改时采用默认值

Question

我正在更新用户的状态，如 this post here 所示.

我的问题是，现在只有表的第一行被正常更改，无论行的下拉列表的值是什么，显示和发送的值现在都是select。

这是我的 Ajax 脚本:

$(document).ready(function()
{
$(document).on('change', '#patient_status ', function()
{
    var pid = $(this).closest('tr').attr('id');
    var current_status = $(this).closest('tr').children('td.change_status').text();
    var new_status = $("#patient_status").val();
    if(current_status == new_status)
    {
        alert("The status selected is already the same!");
    }
    else
    {
        if(confirm("Are you sure you want to change the status of a patient ?"))
        {

            $(this).closest('tr').children('td.change_status').text(new_status);
            //console.log(pid + " " + new_status);
            $.ajax({
                url: '../php/changeStatus.php',
                type: 'POST',
                dataType: 'TEXT',
                data: {pid: pid, new_status: new_status},
                success:function(resp){

                },
                error:function(resp){

                },
            })
        }
    }
});
});

这是我的 HTML 表格:

<tr id="<?php echo $patient['patient_id']; ?>">
<td id="change_status"><?php echo $patient['patient_status']; ?></td>
<tr>
<td>
  <select style="color: #0090ff; " class="form-control select" name="patient_status" id="patient_status">
  <option value="select">Select</option>
  <option value="Active">Active</option>
  <option value="Deceased">Deceased</option>
  <option value="Discharged">Discharged</option>
  <option value="Defaulter">Defaulter</option>
  </select>
</td>

结果如下:

第一行通常更改为“事件”，如下拉列表所示。

第二行的值被解除，数据库和屏幕上的值都变成了select。

我认为问题出在这里:

var new_status = $("#patient_status").val();

或者此处不适合使用更改事件。

编辑

无论在第二行中选择什么值，然后我对其进行控制台，它只是:选择作为显示的值。

我将我怀疑的行更改为:

var new_status = $("#patient_status option:selected").text();

但一切都没有改变。

Answer 1

您为每个选择指定了相同的 ID，但 ID 必须是唯一的。

我建议给选择一个类patent_status，并相应地更改 JS。

所以像这样:

$(function() {
  $(document).on('change', '.patient_status', function() {
    var $select = $(this);
    var $tr = $select.closest('tr');
    var pid = $tr.attr('id');
    var $status = $tr.children('td.change_status');
    var current_status = $status.text();
    var new_status = $select.val();
    if (current_status == new_status) {
      alert("The status selected is already the same!");
    }
    else {
      if (confirm("Are you sure you want to change the status of a patient ?")) {
        $status.text(new_status);
        //console.log(pid + " " + new_status);
        $.ajax({
          url: '../php/changeStatus.php',
          type: 'POST',
          dataType: 'TEXT',
          data: { pid: pid, new_status: new_status },
          success: function(resp) {},
          error: function(resp) {}
        });
      }
    }
  });
});

html 中间某处的开放 tr 标记和对 td.change_status 的引用也存在问题，但您的 html 中不存在此元素和类组合。有一个 id 为 change_status 的 td，但是您会遇到与上面所述相同的问题，因为它不是唯一的。

编辑:下面的 HTML 修复

<tr id="<?php echo $patient['patient_id']; ?>">
  <td class="change_status"><?php echo $patient['patient_status']; ?></td>
  <td>
    <select style="color: #0090ff; " class="form-control select patient_status" name="patient_status">
      <option value="select">Select</option>
      <option value="Active">Active</option>
      <option value="Deceased">Deceased</option>
      <option value="Discharged">Discharged</option>
      <option value="Defaulter">Defaulter</option>
    </select>
  </td>
</tr>