Sorry for my stupid request but it's my first time working on an Ajax.

I tryed alone for two days but I cant find the right way to solve this.

I have two <select>. The first one is populated with a simple query and foreach cycle, when I select name="X" the second select name="Y" options should be populated with the result of another query on ajax.php. ($datasy).

For php mysql query I'm using Medoo library.

I used as example this stack post

This is maga_scarica.php

<script type="text/javascript" src="js/unload.js"></script>
<br>
<h1>Sarica articolo da magazzino:</h1>
<br>
<form method="POST" action="maga_scarica.php" enctype="multipart/form-data">
    <div class="form-row">
        <div class="col-3">
            <label for="exampleFormControlSelect1">Cod.Articolo:</label>
            <select id="X" class="form-control" required name="X">
    <?php
        foreach ($datasx as $data) {
            echo "<option>".$data["codarticolo"]."</option>";
        }
    ?>
            </select>
        </div>
        <div class="col-1">
            <label for="exampleFormControlSelect1">Lotto:</label>
            <select id="Y" class="form-control" required name="Y">
            </select>
        </div>
        <div class="col-2">
            <label for="exampleFormControlSelect1">N. Doc:</label>
            <input type="text" class="form-control" placeholder="Numero documento" required name="ndoc">
        </div>
        <div class="col-2">
            <label for="exampleFormControlSelect1">Quantita Scaricata:</label>
            <input type="text" class="form-control" placeholder="Es. 410" required name="qta">
        </div>
    </div>
    <div class="form-row">
        <div class="col-8">
            <label for="exampleFormControlSelect1">Note:</label>
            <input type="text" class="form-control" name="note">
        </div>
    </div>
    <div class="form-row">
        <div class="col-1">
            <br><br>
            <button type="submit" name="add">Carica</button>
            <input type="hidden" value="carica" name="azione" />
        </div>
    </div>
</form>

unload.js inside maga_scarica.php I dont know if it is the right way.

$("#X").change(function(){
    var x_value=$("#X").val();
    $.ajax({
        url:'ajax.php',
        data:{brand:x_value},
        type: 'post',
            success : function(resp){
                $("#Y").html(resp);               
            },
            error : function(resp){}
    });
});

And then the ajax.php for the ajax request with second query for second .

<?php
    $codart = "$_POST["brand"]";
    $datasy = $database->select("magazzino_mov", [
            "lotto"
        ], [
            "codart" => "$codart"
        ]);
    foreach ($datasy as $data) {
        echo "<option>".$data['lotto']."</option>";
    }

?>

Again sorry if someone think this is a stupid request but I have nobody to ask help.

Thank you all.