PHP实现关联下拉选择框 选中上级分类后过滤选项并获取数据库行

实现方案 #

第一步：调整现有下拉框基础结构，新增后端查询接口 #

上级分类的option值建议用id而不是名称，避免重名匹配出错；同时需要单独写一个根据上级分类值查询对应分类选项的PHP接口。
修改后的页面代码如下：

<!-- 上级分类下拉框 -->
<span>上级分类（Oberkategorie）：</span>
<select class="dropdown1" id="oberkategorie">
<?php
include "dbConn.php";
// 查询id和对应的oberkategorie，value存id后续查询更准确
$records = mysqli_query($db, "select DISTINCT id, oberkategorie from dropdown");
while($obk = mysqli_fetch_array($records)) {
  echo "<option value='".$obk['id']."'>".$obk['oberkategorie']."</option>";
}
?>
</select>
<br><br>
<span>分类（Kategorie）：</span>
<select class="dropdown2" id="kategorie">
<!-- 初始留空，默认加载第一个上级分类对应的选项 -->
</select>
<br><br>
<!-- 子分类结构可以照着分类的逻辑后续扩展 -->

新建get_kategorie.php后端接口文件，代码如下：

<?php
include "dbConn.php";
// 接收前端传的上级分类id
$ober_id = $_GET['ober_id'] ?? 0;
if($ober_id) {
  // 查询对应上级分类下的分类，同时匹配和上级分类名称一致的选项
  $sql = "SELECT DISTINCT kategorie FROM dropdown 
          WHERE pid = ? OR oberkategorie = (SELECT oberkategorie FROM dropdown WHERE id = ?)";
  // 预处理语句避免SQL注入
  $stmt = mysqli_prepare($db, $sql);
  mysqli_stmt_bind_param($stmt, "ii", $ober_id, $ober_id);
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);
  $options = [];
  while($row = mysqli_fetch_assoc($result)) {
    $options[] = $row;
  }
  echo json_encode($options);
}
?>

注：SQL中的pid是你表内存储上级分类关联id的字段，如实际字段名不同请替换为你自己的字段名

第二步：添加JS联动逻辑 #

用原生JS即可实现联动，代码加在页面底部即可：

// 页面加载完成后自动加载第一个上级分类对应的分类选项
document.addEventListener('DOMContentLoaded', function() {
  getKategorie(document.getElementById('oberkategorie').value);
})
// 监听上级分类下拉框的变更事件
document.getElementById('oberkategorie').addEventListener('change', function() {
  getKategorie(this.value);
})
// 封装获取分类选项的方法
function getKategorie(ober_id) {
  fetch('get_kategorie.php?ober_id=' + ober_id)
    .then(res => res.json())
    .then(data => {
      let katSelect = document.getElementById('kategorie');
      // 清空原有选项
      katSelect.innerHTML = '';
      // 插入新查询到的选项
      data.forEach(item => {
        let option = document.createElement('option');
        option.value = item.kategorie;
        option.textContent = item.kategorie;
        katSelect.appendChild(option);
      })
    })
}

后续使用说明 #

• 下拉框选中值可以直接通过document.getElementById('oberkategorie').value、document.getElementById('kategorie').value获取，可直接用于后续的数据库查询逻辑
• 子分类的实现可以完全参照分类的联动逻辑，新增监听分类下拉框变更的事件、新增对应后端查询接口即可

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