基于MySQL、JS、HTML的联动下拉框实现技术问询

Hey there! Let's tackle that dependent dropdown feature for your campus exam system. I'll walk through your existing code, fix key issues, and share refined snippets with clear explanations so you can get this working smoothly.

First up, your current JS has a small syntax issue: you can't include code directly inside a <script> tag that has a src attribute. Let's split that into two separate tags, and clean up the logic a bit:

<!-- Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Then your custom script -->
<script>
$("#subjectSelect").change(function() {
  // Get the selected subject ID
  const selectedSubject = $(this).val();
  
  // Clear the field dropdown first to avoid mixing old/new data
  $("#fieldSelect").empty();
  
  // Only trigger the AJAX call if a valid subject is selected
  if (selectedSubject) {
    $("#fieldSelect").load("getter.php?choice=" + selectedSubject);
  } else {
    // Reset to a default prompt if no subject is chosen
    $("#fieldSelect").append('<option value="">请选择学科领域</option>');
  }
});
</script>

Key Notes: #

• Splitting the jQuery import and custom code ensures both run correctly (browsers ignore inner code when a src attribute is present).
• The empty check prevents unnecessary AJAX requests when the user selects the blank default option.
• Clearing the field dropdown before loading new options keeps the UI clean and avoids confusion.

Your PHP code uses deprecated mysql_* functions (these are no longer supported and pose security risks). Since your frontend uses mysqli_*, let's update this to match, plus fix a syntax error in your echo line:

<?php
session_start();
include "includes/dbc.inc.php"; // Ensure this file sets up a mysqli connection ($conn)

// Sanitize input to prevent SQL injection
$choice = mysqli_real_escape_string($conn, $_GET['choice']);

// Query to fetch fields linked to the selected subject
$query = "SELECT field_id, field_name FROM fielda WHERE field_subj_id = '$choice'";
$result = mysqli_query($conn, $query);

// Add a default prompt option first
echo '<option value="">请选择学科领域</option>';

// Loop through results and build dropdown options
while ($row = mysqli_fetch_array($result)) {
  // Use htmlspecialchars to prevent XSS attacks
  echo '<option value="'.$row['field_id'].'">' . htmlspecialchars($row['field_name']) . '</option>';
}
?>

Key Fixes & Improvements: #

• Switched from mysql_* to mysqli_* to align with your existing database setup and maintain security.
• Added htmlspecialchars() around field names to block cross-site scripting (XSS) attacks—critical for user-facing content.
• Fixed the misplaced } in your original echo line that would break the loop.
• Included a default option so the field dropdown isn't completely empty after loading.

Your existing HTML is mostly solid, but let's adjust the default options to be more user-friendly and add XSS protection:

<select name="subject" required id="subjectSelect">
  <option value="">请选择科目</option>
  <?php
  $querySubjects = "SELECT * FROM subject";
  $resultSubjects = mysqli_query($conn, $querySubjects);
  while ($row_subjects = mysqli_fetch_array($resultSubjects)) {
    // Sanitize subject names too
    echo '<option value="' . $row_subjects['subj_id'] . '">' . htmlspecialchars($row_subjects['subj_name']) . '</option>';
  }
  ?>
</select>

<!-- Field dropdown with initial prompt -->
<select name="fieldSet" id="fieldSelect" required>
  <option value="">请选择学科领域</option>
</select>

Why This Helps: #

• Clear default prompts guide users on what to select, and the required attribute will enforce selection before form submission.
• Applying htmlspecialchars() to subject names closes another potential XSS vulnerability.

内容的提问来源于stack exchange，提问作者mike6715b