Javascript 单板、中型和中型的动态相关下拉列表；标准

我正在尝试创建动态相关下拉列表。在这种情况下，用户在加载该板介质和加载选择介质标准后首先选择板。它类似于国家、州和城市的下拉列表

这里是附加代码。下拉菜单不能正常工作。当我选择线路板时，介质下拉列表未加载，显示为空白。请任何人发现错误并给我解决方法。谢谢你

index.php

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#board').on('change',function(){
        var boardID = $(this).val();
        if(boardID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'board_id='+boardID,
                success:function(html){
                    $('#medium').html(html);
                    $('#standard').html('<option value="">Select medium first</option>'); 
                }
            }); 
        }else{
            $('#medium').html('<option value="">Select board first</option>');
            $('#standard').html('<option value="">Select medium first</option>'); 
        }
    });

    $('#medium').on('change',function(){
        var mediumID = $(this).val();
        if(mediumID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'medium_id='+mediumID,
                success:function(html){
                    $('#standard').html(html);
                }
            }); 
        }else{
            $('#standard').html('<option value="">Select medium first</option>'); 
        }
    });
});
</script>

<?php
//Include the database configuration file
include 'db_connect.php';

//Fetch all the country data
$query = $db->query("SELECT * FROM ag_board WHERE board_status = 1 ORDER BY board_name ASC");


//Count total number of rows
$rowCount = $query->num_rows;
?>
<select id="board">
    <option value="">Select Board</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['board_unique_id'].'">'.$row['board_name'].'</option>';
        }
    }else{
        echo '<option value="">board not available</option>';
    }
    ?>
</select>

<select id="medium">
    <option value="">Select board first</option>
</select>

<select id="standard">
    <option value="">Select medium first</option>
</select>

$（文档）.ready（函数（）{
$（'#board'）。on（'change'，function（）{
var boardID=$（this.val（）；
if（boardID）{
$.ajax({
类型：'POST'，
url:'ajaxData.php'，
数据：'board_id='+boardID，
成功：函数（html）{
$（'#medium'）.html（html）；
$（'#standard'）.html（'Select medium first'）；
}
}); 
}否则{
$（'#medium'）.html（'Select board first'）；
$（'#standard'）.html（'Select medium first'）；
}
});
$（'#medium'）。on（'change'，function（）{
var mediumID=$（this.val（）；
if（mediumID）{
$.ajax({
类型：'POST'，
url:'ajaxData.php'，
数据：'medium_id='+mediumID，
成功：函数（html）{
$（'标准'）.html（html）；
}
}); 
}否则{
$（'#standard'）.html（'Select medium first'）；
}
});
});
选择板
先选板
先选择中等

ajaxData.php

<?php
//Include the database configuration file
include 'db_connect.php';

if(!empty($_POST["board"])){
    //Fetch all state data
    $query = $db->query("SELECT * FROM ag_medium WHERE board_unique_id = ".$_POST['board_unique_id']." AND medium_status = 1 ORDER BY medium_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //State option list
    if($rowCount > 0){
        echo '<option value="">Select medium</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['medium_unique_id'].'">'.$row['medium_name'].'</option>';
        }
    }else{
        echo '<option value="">Medium not available</option>';
    }
}elseif(!empty($_POST["medium_unique_id"])){
    //Fetch all city data
    $query = $db->query("SELECT * FROM ag_standard WHERE medium_unique_id = ".$_POST['medium_unique_id']." AND status = 1 ORDER BY std_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //City option list
    if($rowCount > 0){
        echo '<option value="">Select Standard</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['std_unique_id'].'">'.$row['std_name'].'</option>';
        }
    }else{
        echo '<option value="">Std not available</option>';
    }
}
?>

---

你好，我正在看你的帖子。你能解释一下你所说的“下拉菜单不能正常工作”是什么意思吗？具体一点更有帮助。@rainer我的意思是，当我在第一个下拉列表中选择board时，第二个下拉列表中的媒体没有加载。信息很好。理想情况下，您可以编辑您的问题并将澄清放在那里。这只是为了帮助你开始，所以。。。
<?php
//Database credentials
$dbHost     = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName     = 'db_aneri';

//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>