如何根据第一个Select选项从MySQL数据库填充第二个Select组件

我完全懂你的痛点——课程数量多且各课程章节不固定，静态数组的方案根本不适用，必须实时从数据库拉取对应数据。下面给你一套完整的实现方案，分前端和后端两部分，都是最常用的技术栈：

1. 前端HTML结构 #

先把两个Select元素写好，第二个初始状态给个提示选项：

<select id="rcorners2" class="courses">
  <option value="1130">Database</option>
  <option value="110110110">Web Advance</option>
  <!-- 更多课程选项 -->
</select>

<select id="sections" class="sections">
  <option value="">请先选择课程</option>
</select>

2. 前端JavaScript实现 #

用原生JS监听第一个Select的change事件，获取选中的课程ID后，通过AJAX请求后端接口拉取章节数据，再渲染到第二个Select里：

// 获取两个Select元素
const courseSelect = document.getElementById('rcorners2');
const sectionSelect = document.getElementById('sections');

// 监听课程选择变化
courseSelect.addEventListener('change', function() {
  const selectedCourseId = this.value;
  
  // 如果没选中有效课程，重置第二个Select
  if (!selectedCourseId) {
    sectionSelect.innerHTML = '<option value="">请先选择课程</option>';
    return;
  }

  // 发起AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `get_sections.php?course_id=${selectedCourseId}`, true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 解析后端返回的JSON数据
      const sections = JSON.parse(xhr.responseText);
      
      // 清空现有选项并添加默认提示
      sectionSelect.innerHTML = '<option value="">请选择章节</option>';
      
      // 循环生成章节选项
      sections.forEach(section => {
        const option = document.createElement('option');
        option.value = section.section_number;
        option.textContent = `章节 ${section.section_number}`;
        sectionSelect.appendChild(option);
      });
    } else {
      sectionSelect.innerHTML = '<option value="">加载章节失败</option>';
    }
  };
  
  xhr.onerror = function() {
    sectionSelect.innerHTML = '<option value="">网络错误，请重试</option>';
  };
  
  xhr.send();
});

如果你习惯用jQuery，代码可以更简洁：

$('#rcorners2').on('change', function() {
  const courseId = $(this).val();
  
  if (!courseId) {
    $('#sections').html('<option value="">请先选择课程</option>');
    return;
  }
  
  $.get(`get_sections.php?course_id=${courseId}`, function(data) {
    const sections = JSON.parse(data);
    let options = '<option value="">请选择章节</option>';
    sections.forEach(section => {
      options += `<option value="${section.section_number}">章节 ${section.section_number}</option>`;
    });
    $('#sections').html(options);
  }).fail(function() {
    $('#sections').html('<option value="">加载章节失败</option>');
  });
});

3. 后端接口实现（以PHP为例） #

创建get_sections.php文件，负责接收前端传来的课程ID，查询MySQL数据库并返回JSON格式的章节数据：

<?php
// 替换成你的数据库连接信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 过滤参数防止SQL注入（更安全的方式是用预处理语句）
$course_id = $conn->real_escape_string($_GET['course_id']);

// 预处理语句版本（推荐，更安全）
$stmt = $conn->prepare("SELECT section_number FROM course WHERE course_id = ?");
$stmt->bind_param("s", $course_id); // 若course_id是整数，把"s"改成"i"
$stmt->execute();
$result = $stmt->get_result();

$sections = [];
if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $sections[] = $row;
  }
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($sections);

// 关闭连接
$stmt->close();
$conn->close();
?>

关键注意事项 #

• SQL注入防护：一定要用预处理语句或者参数过滤，绝对不能直接把用户输入拼到SQL语句里
• 数据格式：后端必须返回JSON格式，这样前端才能方便解析
• 错误处理：要考虑请求失败、数据库连接失败等异常情况，给用户友好提示

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