jQuery Ajax と PHP を使用して、MySQL データベースからデータをフェッチし、結果を要素<option>
内に追加するスクリプトを作成しました<select>
。
コードは次のように動作するはずです。
テキスト入力の名前が変更されると、クラスのすべてのオプションが要素.modpick
から削除され<select>
ます。次に、Ajax 呼び出しが PHP スクリプトに接続され、データベース内に同じ名前のレコードが複数存在するかどうかがチェックされます。そうでない場合は、別の Ajax 呼び出しが別の PHP スクリプトに接続し、データベースからデータを取得して<option>
要素としてエコーします。次に、Ajax コールバックが、PHP スクリプトからのデータを<select>
要素に追加します。
私が抱えている問題は、<option>
要素が2回追加されることがあるため、要素を開く<select>
と同じものが2回表示されること<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 (クエリが実行された後 - 2 つの同一<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>