Voici quelles sont les modifications à apporter :
rappel : arrondissement est le niveau supérieur (niveau 1) et installation le niveau dépendant (niveau 2)
1- étendre la définition de installations aux colonnes B et C
2- ajouter une fonction qui permet, quand le niv1 change, de remettre à jour les options du niveau 2
window.onload = function() {
var niv1 = document.getElementById("arrondissement");
var niv2 = document.getElementById("installation");
niv1.onchange = function() {
niv2.length = 1;
<? for (var i = 0; i < installations.length; i++) { ?>
if(<?= installations[i][0] ?> == this.value){
niv2.options[niv2.options.length] = new Option(<?= installations[i][1] ?>,<?= installations[i][1] ?>);
}
<? } ?>
niv2.options[niv2.options.length] = new Option('','');
}
}
avec ajout aussi le l'id à côté du name
3- en création, on n'affiche aucun option pour le niveau 2
<select name="installation" id="installation">
<option value="" disabled selected >Selectionner ...</option>
</select>
4- en modification, on n'affiche que les options qui correspondent au niveau 1
<select name="installation" id="installation">
<option value="" disabled selected >Selectionner ...</option>
<? for (var i = 0; i < installations.length; i++) { ?>
<? if( installations[i][0] == data[0][0] ){ ?>
<option value="<?= installations[i][1] ?>" <?= ((installations[i][1]==data[0][1])?'selected':'') ?> ><?= installations[i][1] ?></option>
<? } ?>
<? } ?>
</select>