Bonjour , j'ai une fomulaire de recherche contenant deux <select>, le premier est la categorie des emplois recherchés, le deuxieme <select> contient les emplois retournés en fonction de la categorie d'emplois recherchée avec le premier select.

J'ai fait mon systeme d'actualisation de mon deuxieme <select> en AJAX. Tous fonctionne bien.

Le problème qui se pose est que lorsque je choisis une categorie, ça m'affiche bien les emplois recherchés dans le deuxieme select mais le code source ne change pas comme il n'y a pas de reactualisation de la page. Donc si j'envoie mon formulaire ça ne fonctionne pas. Ce que je selectionne dans mon deuxieme select n'est pas pris en compte.

En gros il faudrait que quand je chois une categorie, le code se reactualise.

<select name="groupe" class="groupe">
                    <option value="">CATEGORIE DE L'EMPLOI</option>
                    <option value="cuisine">CUISINE</option>
                    <option value="restaurant/bar">RESTAURANT/BAR</option>
                    <option value="réception/conciergerie">RECEPTION/CONCIERGERIE</option>
                    <option value="étages/lingerie">ETAGES/LINGERIE</option>
                    <option value="direction/encadrement">DIRECTION/ENCADREMENT</option>
                    <option value="administration">ADMINISTRATION</option>
                    <option value="loisirs">LOISIRS</option>
                </select>
                
                <select name="categorie" class="select-cat">
                    <option value="">INTITULE DE L'EMPLOI</option>
                    <?php
                    
                    $req = $bdd->query('SELECT * FROM metiers');

                    while($data = $req->fetch()){
                        echo "<option value='".$data['nom']."'>".$data['nom']." H/F</option>";
                    }
                    
                    ?>
                </select>

<script>
            $(function(){
                
                $(document).on("change",".groupe",function(){
                    
                    var groupe = $(".groupe").val();
                    
                    $.post("traitement-annonces.php",{groupe:groupe},function(data){
                        
                        $('.select-cat').html(data);
                        
                    });
                    
                });
               
                
            });
        
        </script>

<?php
require "db.php";


if(isset($_POST['groupe'])){
    
    $req = $bdd->prepare('SELECT * FROM metiers WHERE categorie  = ?');
    $req->execute(array($_POST['groupe']));
    
    while($data = $req->fetch()){
        echo "<option value=".$data['nom'].">".$data['nom']."</option>";
    }
    
}

?>