对PHP的Jquery Ajax调用有时会追加两次数据

我已经使用jQuery Ajax和PHP编写了一个脚本，该脚本应该从MySQL数据库中获取数据，并将结果作为<option>附加到<select>元素中。

代码应该这样工作：

当文本输入中的名称更改时，类.modpick的所有选项都将从<select>元素中删除。然后，Ajax调用连接到一个PHP脚本，该脚本检查数据库中是否有多个具有相同名称的记录。如果没有，另一个Ajax调用将连接到另一个PHP脚本，该脚本从数据库中提取数据并将其作为<option>元素进行回显。Ajax回调然后将PHP脚本中的数据附加到<select>元素中。

我遇到的问题是，有时<option>元素被追加两次，所以当您打开<select>元素时，它会显示两次相同的<option>。真正令人困惑的是，这种情况并非总是发生——只是偶尔发生。

我不知道为什么会发生这种情况，尤其是因为它不是每次都发生，我也无法确定这是jQuery还是PHP的问题。如有任何帮助，我们将不胜感激。

代码：

jQuery:

$(document).on('change', "#uploadname", function () {
    uploadname = $(this).val();
    $('.modpick').remove();
    $.ajax({
        url: "uploadnames.php",
        type: "POST",
        data: {
            uploadname: uploadname
        },
        success: function (data) {
            $('#checkulinputs').html(data);
            uploademailcheck = $('#emailupcheckinput').val();
            if (uploademailcheck == 'nochoose') {
                uploademail = '';
                $('#ulemailcheck').slideUp();
                $.ajax({
                    url: "uploadnamesmodules.php",
                    type: "POST",
                    data: {
                        uploadname: uploadname
                    },
                    success: function (data) {
                        $(data).appendTo($('#uploadmoduleselect'));
                    }
                });
            }
        }
    })
})

PHP:

include_once('../../dbconnect.php');
$name = mysqli_real_escape_string($conn, $_POST['uploadname']);
$query = "SELECT * FROM marking_assignments WHERE name = '$name' ORDER BY unit ASC";
$details = $conn->query($query);
while ($row = $details->fetch_assoc()){
 $modnamequery = "SELECT mod_name FROM modules WHERE module = '" . $row['unit'] . "'";
 $modname = $conn->query($modnamequery);
 while ($line = $modname->fetch_assoc()){
  $descrip = $line['mod_name'];
  }
echo '<option  value="' . $row['unit'] . '" id="m' . $row['unit'] . '" class="modpick">' . $descrip . '</option>'; 
}

HTML（运行查询后，请注意两个相同的<option>元素）：

<form id="uploadfeedbackform" method="POST" action="uploadfeedback.php">
  <input type="text" class="inputs" name="upload_name" id="uploadname" placeholder="Enter Student Name" />
  <div id="checkulinputs"></div>
  <div id="ulemailcheck" class="emailchecker"></div>
  <select id="uploadmoduleselect" name="uploadmodules">
     <option  value="choose" class="choosemod">Select Module</option>
     <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at Work</option>
     <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at 
  </select>
 </form>

var myRequest;
//in your change handler...
if (myRequest)
{
    myRequest.abort();
}
myRequest = $.ajax({...});