Récupération valeur select dans une meme page sans submit

Bonjour,

Malgré mes recherches sur internet, je n'arrive pas à récupérer la valeur d'un select, qui me permettra d'alimenter un second select sur une même page.

J'ai une première liste déroulante (categorie_rev) dont les données proviennent de la table "budget_produit" composée de 2 champs ("id_cat_rev" et "categorie_rev"). (cette partie là est OK)

J'ai une seconde liste déroulante (type_rev) dont les données proviennent de la table "budget_ss_produit" composée de 3 champs ("id_rev", "cat_rev_id" type_rev).

Pour alimenter ma seconde liste déroulante j'ai besoin de id_cat_rev de la première liste déroulante

car je vous sélectionner toutes les entrées dans budget_ss_produit où cat_rev_id = id_cat_rev

Pour ce faire, je voudrais récupérer la valeur de catégorie_rev (de ma première liste déroulante) sous forme de variable PHP afin de construire ma requête de la seconde liste.

Je précise que je suis vraiment débutant et que l'AJAX n'était pour moi qu'un club de football ou un produit ménager il y a encore 24h00. Pour faire simple je suis totalement nul.

Bon j'espère avoir été assez clair.

Quelqu'un aurait-il la gentillesse de me guider SVP

Par avance merci à vous.

François


Ci-dessous ma prose :

Page HTML avec les 2 select

<label style="display: inline-block; width: 120px;" class="edit_tiers_sans_tabulation" for="categorie_rev"><strong>Catégorie :</strong></label>
<Select required style="display: inline-block; width: 243px;" class="edit_tiers_sans_tabulation  TypeRevenu" id="categorie_rev" type="text" name="categorie_rev" onchange="idcatrev.value=this.value;">
     <option value="">Sélectionner</option>
     <?php
          while ($catrev = $resultatcatrev->fetch()) {
     ?>
     <option value="<?= $catrev['id_cat_rev']?>"><?=$catrev['categorie_rev'] ?></option>';
     <?php
     }
     $resultatcatrev->closeCursor();
     ?>
</select>

<input style="width: 40px;" name="idcatrev" id="idcatrev" type="text" value=""> <!-- POUR VERIFIER LA VALUE DE "categorie_rev" A ENLEVER OU CACHER DES QUE LA SOLUTION EST TROUVEE !!!! -->

<label style="display: inline-block; width: 120px;" class="edit_tiers_avec_tabulation" for="type_rev"><strong>Nature :</strong></label>
<Select required style="display: inline-block; width: 243px;" class="edit_tiers_sans_tabulation" id="type_rev" type="text" name="type_rev">
     <option value="">Sélectionner</option>
     <?php
     $resultnatrev = $bdd->prepare('SELECT * FROM budget_ss_produit WHERE cat_rev_id = $type_rev  ');
     $executeIsOk4 = $resultnatrev->execute();
          while ($natrev = $resultnatrev->fetch()) {
     ?>
      <option value="<?= $natrev['id_rev']?>"><?=$natrev['type_rev']?></option>
      <?php    
     }
     $resultatnatrev->closeCursor();
     ?>
      </select>

Page de traitement PHP

<?php
$bdd = new PDO('mysql:host=localhost;dbname=PVSOFT', 'root', 'root');

$RevId = !empty($_POST['idcatrev']) ? $_POST['idcatrev'] : NULL;

$query = ("SELECT * FROM budget_ss_produit WHERE id_rev = ('SELECT nature_rev FROM revenus WHERE id_rev = $RevId')");

json_encode(array('idtypereve'=>$query));

Partie JAVASCRIPT

<script>
        $(document).ready(function(){
            $(".TypeRevenu").change(function(){
                $.ajax({
                    url: 'TypeRevenu.php', 
                    type: 'POST',
                    data: 'rev_id=' + rev_id,
                    dataType: "json",
                    success: function(data){
                    console.log(data);
                    $type_rev.val(data.idtypereve);    
                    },
                    error: function(jqXHR,textStatus){
                    console.log(textStatus,jqXHR);
                    alert('Error AJAX !');
                    }
                });
            });
        });
    </script>