How to update an HTML select options based on another select result

Question

Im writing first question on StackOverflow because I just can't get this to work.

What im trying to do is fill a second select (id=libres) with a the results of query to my databse where one of the conditions is the choice of the first select (id=tipos). The thing is that i don't want to use a submit button, instead i want it to be done in the same page.

Before I continue this is my HTML code for the first select

                        <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>

And here is the second:

                        <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>                                                       

As you can see I already have an script on the second select that i copied and edited from another post. It should send the result to a second php file that would process the query and return HTML code with the options that met the conditions. Here it is

<?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);
?>

Note that i don't have any knowledge about Javascript / JQuery /Ajax and all of those other alternatives. I tried my best to only use PHP but all answers i found used other programming languages.

Hope you understood what i need. Any info you need, please ask!

Answer 1

Change $_POST["tipo_camarote"] to $_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();

JQuery

<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>