如何通过Ajax实现多级下拉框联动并让Book Level 4独立显示

要实现你的需求，我们只需要调整两个核心文件的逻辑：ajaxData.php（新增Level4基于Level1的查询分支）和ajax.js（修改下拉框的联动规则），同时保留Level2、Level3原有的级联功能。

1. 修改 ajaxData.php #

新增一个分支用于根据Level1的代码获取对应的Level4选项，同时保留原有逻辑：

<body>
<?php include 'dbConfig.php';
if(!empty($_POST["bl1_code"])){
    $query2=$_POST['bl1_code'];
    // 获取Book Level2选项（原有逻辑）
    $query = $db->query("SELECT * FROM booklevel2 WHERE bl1_code LIKE '%$query2%' ORDER BY booklevel2 ASC");
    $rowCount = $query->num_rows;
    if($rowCount > 0){
        echo '<option value="">Select Level 2</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['bl2_code'].'">'.$row['booklevel2'].'</option>';
        }
    }else{
        echo '<option value="">Level 2 empty</option>';
    }
}
// 新增：根据Level1获取Level4选项的分支
elseif(!empty($_POST["bl1_for_bl4"])){
    $bl1_code = $_POST["bl1_for_bl4"];
    // 查询该Level1下所有的Level4选项（请根据你的数据库关联调整SQL条件）
    $query = $db->query("SELECT * FROM booklevel4 WHERE bl1_code LIKE '%$bl1_code%' ORDER BY booklevel4 ASC");
    $rowCount = $query->num_rows;
    if($rowCount > 0){
        echo '<option value="">Select Level 4</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['bl4_code'].'">'.$row['booklevel4'].'</option>';
        }
    }else{
        echo '<option value="">Level 4 empty</option>';
    }
}
elseif(!empty($_POST["bl2_code"])){
    $query3=$_POST["bl2_code"];
    $query = $db->query("SELECT * FROM booklevel3 WHERE bl2_code LIKE '%$query3%' ORDER BY booklevel3 ASC");
    $rowCount = $query->num_rows;
    if($rowCount > 0){
        echo '<option value="">Select Level 3</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['bl3_code'].'">'.$row['booklevel3'].'</option>';
        }
    }else{
        echo '<option value="">Level 3 empty</option>';
    }
}
// 移除原有Level3触发Level4的逻辑，因为Level4现在独立于Level3
?>
</body>

注意：如果你的booklevel4表和Level1的关联字段不是bl1_code，请自行调整SQL中的查询条件。

2. 修改 ajax.js #

调整下拉框的联动逻辑，让Level4只跟随Level1变化，不再依赖Level3：

// JavaScript Document
$(document).ready(function() {
    $('#bl1').on('change',function(){
        var blevel1 = $(this).val();
        if(blevel1){
            // 更新Level2（原有逻辑）
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl1_code='+blevel1,
                success:function(html){
                    $('#bl2').html(html);
                    $('#bl3').html('<option value="">Select Level 2 First</option>');
                }
            });
            // 新增：同时更新Level4
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl1_for_bl4='+blevel1,
                success:function(html){
                    $('#bl4').html(html);
                }
            });
        }else{
            $('#bl2').html('<option value="">Select Level 1 First</option>');
            $('#bl3').html('<option value="">Select Level 2 First</option>');
            $('#bl4').html('<option value="">Select Level 1 First</option>');
        }
    });

    $('#bl2').on('change',function(){
        var blevel2 = $(this).val();
        if(blevel2){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl2_code='+blevel2,
                success:function(html){
                    $('#bl3').html(html);
                }
            });
            // Level4保持当前选项，不随Level2变化
        }else{
            $('#bl3').html('<option value="">Select Level 2 First</option>');
            // Level4保留原有选项，只要Level1不为空就不重置
        }
    });

    // 移除原有Level3的change事件，因为Level4不再依赖它
});

3. 测试验证 #

修改完成后，你可以按以下流程测试：

• 选择Book Level1：Level2加载对应选项，Level4同时加载该Level1下的所有选项
• 选择Book Level2：Level3加载对应选项，Level4保持当前选项不变
• 清空Book Level1：所有下拉框回到初始提示状态

这样就完美实现了仅Book Level4独立，只要Book Level1不为空就显示其选项的需求，同时保留了Level2和Level3的原有级联功能。

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