如何根據另一個選擇結果更新 HTML 選擇選項

Question

我在 StackOverflow 上寫了第一個問題，因為我無法讓它起作用。

我試圖做的是用查詢結果填充第二個選擇（id=libres）到我的數據庫，其中一個條件是第一個選擇（id=tipos）的選擇。 問題是我不想使用提交按鈕，而是希望它在同一頁面中完成。

在我繼續之前，這是我的第一個選擇的 HTML 代碼

                        <select name="tipo_camarote" id="tipos">
                            <option></option>

                            <?php                               
                                $conexion = mysqli_connect("localhost", "root", "", "cruceros_msc") or
                                    die ("Problemas con la conexión");                              
                                $registros = mysqli_query($conexion, "SELECT ID_Tipo, Tipo FROM tipo_camarote") or
                                    die ("Problemas en la consulta:" . mysqli_error($conexion));                                
                                while ($reg = mysqli_fetch_array($registros)) {
                                    echo "<option value=" . $reg['ID_Tipo'] . ">" . $reg['Tipo'] . "</option>";
                                }
                                mysqli_close($conexion);
                            ?>

                        </select>

這是第二個：

                        <select name="camarotes_disponibles" id="libres">
                            <script type="text/javascript">
                                $( document ).ready(function(){
                                    $("#tipos").change(function(){
                                        var tipos = $(this).val();
                                        $.post(
                                        "ajax_load_articles.php",
                                        {tipos : tipos},
                                            function(data){
                                                $("#libres").html(data);
                                            }
                                        )
                                    });
                                });
                            </script>

                        </select>                                                       

如您所見，我在第二個選擇中已經有一個腳本，我從另一篇文章中復制和編輯了該腳本。 它應該將結果發送到第二個 php 文件，該文件將處理查詢並返回帶有滿足條件的選項的 HTML 代碼。 這里是

<?php

    $tipos = $_POST["tipo_camarote"];

    $conexion = mysqli_connect("localhost", "root", "", "cruceros_msc") or
    die ("Problemas con la conexión");

    $registros = mysqli_query($conexion, "SELECT ID_Camarote, ID_Tipo, Libre FROM camarote WHERE ID_Tipo = $tipos AND Libre = TRUE") or
    die ("Problemas en la consulta:" . mysqli_error($conexion));

    while ($reg = mysqli_fetch_array($registros)) {
        echo "<option value=" . $reg['ID_Camarote'] . ">" . $reg['ID_Camarote'] . "</option>";
    }

    mysqli_close($conexion);
?>

請注意，我對 Javascript/JQuery/Ajax 和所有其他替代方案一無所知。 我盡力只使用 PHP，但我發現的所有答案都使用了其他編程語言。

希望你明白我需要什么。 有什么需要的信息請追問！

Answer 1

將$_POST["tipo_camarote"]更改$_POST["tipo_camarote"] $_POST["tipos"]

    $conexion = mysqli_connect("localhost", "root", "", "cruceros_msc") or
        die ("Problemas con la conexión");

        $registros = mysqli_query($conexion, "SELECT ID_Camarote, ID_Tipo, Libre FROM camarote WHERE ID_Tipo = $tipos AND Libre = TRUE") or
        die ("Problemas en la consulta:" . mysqli_error($conexion));

        while ($reg = mysqli_fetch_array($registros)) {
            $html .= "<option value=" . $reg['ID_Camarote'] . ">" . $reg['ID_Camarote'];
        }

        mysqli_close($conexion);
$result['html'] = $html;
echo json_encode($result);
exit();

查詢

<script type="text/javascript">
$( document ).ready(function(){
    $("#tipos").change(function(){
        var tipos = $(this).val();
        $.ajax({
                    url: "ajax_load_articles.php",
                    type: 'POST',
                    data: {tipos : tipos},
                    dataType: "json",
                    cache: false,
                    success: function(data) {
                        $('.preloader').hide();
                        console.log(data);
                        $("#libres").html(data.html);
                    }
            });         
    });
});
</script>