Ah oui en effet ça marche et j'ai réussi assez facilement a mettre une value (qui sert d'id) aux competences

En fait mList[itm][i] est un objet car $row est un tableau associatif.
Tu devrais pouvoir utiliser mList[itm][i]['nom'] et mList[itm][i]['id'].
Regarde le code source généré pour voir la valeur de mList.

[php]En fait mList[itm][i] est un objet car $row est un tableau associatif.
Tu devrais pouvoir utiliser mList[itm][i]['nom'] et mList[itm][i]['id'].
Regarde le code source généré pour voir la valeur de mList.[/php]

Ah oui en effet cela marche pour le premier menu déroulant cependant pour le second menu déroulent il y a bien le bon nombre de ligne cependant chaque ligne contient ceci or ce n'est pas la donnée enregistrer dans la bdd [object Object] faut il modifier quelque chose pour que ça marche ? (voici ce que j'ai mis)

[code]
<div class="wrapper">
<select id="parent_select"><option>----</option></select>
<select id="child_select"></select>
</div>

<script language="javascript" type="text/javascript">

var mList = <?php echo json_encode($competences); ?>

el_parent = document.getElementById("parent_select");
el_child = document.getElementById("child_select");

for (key in mList) {
el_parent.innerHTML = el_parent.innerHTML + '<option>'+ key +'</option>';
}

el_parent.addEventListener('change', function populate_child(e){
el_child.innerHTML = '';
itm = e.target.value;
if(itm in mList){
for (i = 0; i < mList[itm].length; i++) {
el_child.innerHTML = el_child.innerHTML + '<option>'+ mList[itm][i] +'</option>';
}
}
});

</script>
[/code]

<script type="text/javascript">
var mList = <?php echo json_encode($competences); ?>;
</script>

Après avoir bien structuré le tableau $competences :
[php]<script type="text/javascript">
var mList = <?php echo json_encode($competences); ?>;
</script>[/php]

L'id étant surement important dans ton cas il faut adapter le code javascript pour injecter les id dans l'attribut value des balises option et adapter la structure du tableau pour avoir l'id et le label (mais en fait tu dois déjà les avoir je crois).

Merci pour ton aide. Je vois a peut près comment ça marche mais par contre je ne comprend pas comment faire pour mettre ce que j'obtiens de la bdd dans la var mList de ton lien

Salut,
https://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically

Bonjour, voilà j'ai actuellement un menu déroulant (codé comme ceci)
[code]
$competencesData = $db->query('
SELECT c.id, c.nom, cc.nom as categorie
FROM competence c
INNER JOIN categorie_competence cc
ON cc.id = c.categorie_competence_id
')->fetchAll();

$competences = [];
foreach ($competencesData as $row) {
if (!array_key_exists($row['categorie'], $competences)) {
$competences[$row['categorie']] = [];
}
$competences[$row['categorie']][] = $row;
}
?>
<form method="post" name="ajouterEleve">

<label for="competences">Compétences:</label>
<select id="competences" name="competences[]">
<?php foreach ($competences as $competenceLabel => $competenceRows): ?>
<optgroup label="<?= $competenceLabel ?>">
<?php foreach ($competenceRows as $competence): ?>
<option value="<?= $competence['id'] ?>"><?= ucfirst($competence['nom']) ?></option>
<?php endforeach; ?>
</optgroup>
<?php endforeach; ?>
</select><br>
[/code]

Cependant étant donnée la taille de chaque catégorie j'aimerais faire en sorte d'avoir un premier menu déroulant et lorsqu'on sélectionne une des catégories que cela affecte un second menu déroulant et affichant dedans les compétences de la catégories sélectionner.
Voilà que se pose un problème je ne sais pas si cela est faisable mais je bloque dessus depuis plusieurs jours sans trouver de solution. Pouvez vous m'aider, ou si cela n'est pas faisable me dire ce qui le rend infaisable ?