Boîte de dialogue G.Sheets avancée - liste déroulante en cascade

Bonjour à tous

Après maintes recherches et essais infructueux, je fais appel à votre savoir.

Dans le cadre d'un fichier de suivi de budget, je construit une boite de dialogue avancée pour permettre à l'utilisateur de rentrer ses dépenses. J'ai donc différents champs à remplir et notamment deux listes déroulantes contenant pour la première les catégories de dépenses et la seconde les sous-catégories de dépenses.

L'idée est que lorsque l'utilisateur fais un choix de catégorie de dépenses, la seconde liste déroulante s'actualise pour proposer les sous-catégories de dépenses associées. Et c'est là que je suis bloqué. Je ne parviens pas à alimenter cette seconde liste qui reste désespérément vide...

Voici une copie du fichier en question : https://docs.google.com/spreadsheets/d/17XDy1VeBDjgJk5t6TXKbk_zOWIfvUI59aVBHwWmf2BI/edit?gid=1422579...

merci d'avance pour votre temps et votre aide

Bonne journée à tous

Bonjour,

C'est ton jour de chance

Voici comment faire pour modifier la seconde liste déroulante en fonction de la première :

1. Remplace le code JS qui suit ta liste déroulante ID SelectSousCategories par celui-ci (ce code va permettre de mettre à jour la liste déroulante lorsque la catégorie aura changé) :
   

   document.getElementById('SelectCategories').addEventListener('change', e => {
     if (tabSousCategories) {
   
       const categorie = e.target.value;
       const tab = tabSousCategories.filter(i => i[0] == categorie)[0].slice(1).filter(i => i);
       const selectSousCategories = document.getElementById('SelectSousCategories');
   
       selectSousCategories.innerHTML = '<option value="rien" selected="true">Sélectionnez votre catégorie</option>';
   
       tab.forEach(i => {
         const option = document.createElement('option');
         option.value = i;
         option.text = i;
         selectSousCategories.appendChild(option);
       });
     }
   });

2. Ajoute ce code JS en fin de page dans les balises <script> vides (ce code récupère un tableau avec les sous-catégories une seule fois) :
   

   let tabSousCategories;
   google.script.run.withSuccessHandler(i => tabSousCategories = i).getSousCategories();

3. Ajoute ce code Apps Script dans Test.gs (ce code récupère les sous-catégories de la feuille) :
   

   function getSousCategories() {
     return SpreadsheetApp.getActive().getSheetByName('Paramétrages').getRange('H4:R16').getValues();
   }

4. Supprime la fonction donneesouscategories(formObject), supprime onchange="donneesouscategories(this)", supprime onchange="actualisation(data)".

Super ça fonctionne parfaitement !

Merci beaucoup ! Je vais pouvoir me pencher dessus pour comprendre précisément le fonctionnement

Bonne fin de journée