如何通过ajax更改多个下拉值？

Question

我创建了4个书籍级别的下拉列表，每个级别依赖于其上级（例如，书籍级别2显示下拉值取决于书籍级别1类别等等）并且它也正常工作，但现在我只想要Book Level 4独立，如果Book Level 1不为空，则应显示值。即，onchange Book level 1，Book Level 2下拉列表显示取决于Book level 1类别的值，它还应显示独立的Book Level 4下拉值。需要帮助。

的index.php

<body>
<form method="post" name="AddBookDetails">
<table>
<tr>
<td>Book Level 1</td>
<td><select id="bl1" name="bookl1"><option value="" selected="selected">Book Level 1</option>
    <?php
    mysqli_set_charset($db,'utf8');
    $result=mysqli_query($db,"select * from booklevel1 ORDER BY booklevel1 ASC");
    if ($result>0){
    while ($row = mysqli_fetch_array($result)) {
    echo '<option value="'.$row['bl1_code'].'">'.$row['booklevel1'].'</option>';    
    }
    }
    else{
        echo '<option value="">Book Level 1 not present</option>';
    }
    ?></select></td>
</tr>

<tr>
<td>Book Level 2</td>
<td><select id="bl2" name="bookl2" ><option value="" >Select Level 2</option></select></td>
</tr>

<tr>
<td>Book Level 3</td>
<td><select id="bl3" name="bookl3" ><option value="" >Select Level 3</option></select></td>
</tr>

<tr>
<td>Book Level 4</td>
<td><select id="bl4" name="bookl4" ><option value="" >Select Level 4</option></select></td>
</tr>
</table>
<input name="addbook" type="submit" value="Save">
</form>
</body>

ajaxData.php

<body>

<?php
include 'dbConfig.php';
if(!empty($_POST["bl1_code"])){

    $query2=$_POST['bl1_code'];
    $query = $db->query("SELECT * FROM booklevel2 WHERE bl1_code LIKE '%$query2%' ORDER BY booklevel2 ASC");
    $rowCount = $query->num_rows;

    //Book Level 2 option list
    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>';
    }
}

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;

    //Book Level 3 option list
    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>';
    }
}

elseif(!empty($_POST["bl3_code"])){

    $query4=$_POST["bl3_code"];
    $query = $db->query("SELECT * FROM booklevel4 WHERE bl3_code LIKE '%$query4%' ORDER BY booklevel4 ASC");
    $rowCount = $query->num_rows;

    //Book Level 4 option list
    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>';
    }
}
?>
</body>

ajax.js

// javascript Document
$(document).ready(function() {
            $('#bl1').on('change',function(){
        var blevel1 = $(this).val();
        if(blevel1){
            $.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>');
                    $('#bl4').html('<option value="">Select Level 3 First</option>');
                }
            });
        }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 3 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);
                }
            }); 
        }else{
            $('#bl3').html('<option value="">Select Level 2 First</option>');
            $('#bl4').html('<option value="">Select Level 3 First</option>'); 
        }
    });


    $('#bl3').on('change',function(){
        var blevel3 = $(this).val();
        if(blevel3){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl3_code='+blevel3,
                success:function(html){
                    $('#bl4').html(html);
                }
            }); 
        }else{
            $('#bl4').html('<option value="">Select Level 3 First</option>'); 
        }
    });

});