0

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>
4

1 に答える 1