Listes liées en cascade

Bonjour à tous,

En m'inspirant de cet exemple, je cherche à sélectionner une activité (d'après la nomenclature NAF de l'INSEE) à partir de 4 listes en cascade (section, division, groupe, classe respectivement issues de 4 tables naf1 à naf4).
J'ai une structure MVC avec:

un fichier contrôleur 'activities.php'
un fichier vue 'formActivities.php'
un fichier de traitement AJAX 'customerActivitiesHandler.js'

L'ensemble est inclus dans un fichier père, lequel est également inclus dans un fichier grand-père mais je pense à priori que ceci ne devrait pas avoir d'influence sur ce qui suit.
Voici mon code pour le fichier 1 (contrôleur):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
require_once('../classes/moimp/OptListSelect.php'); // crée une liste select
require_once('../classes/moimp/OptListOption.php');// crée une option de liste select
require_once('../config.php');
require_once('../functions.php');
require_once('../model/model.php');
 
use OptListSelect\OptListSelect;
use OptListOption\OptListOption;
 
$_SESSION['table']	= 'dat_activities';
$tabForm		= 'formActivities.php';
$iCustomerId		= (int) $_SESSION['customerId'];
$language		= $_SESSION['language'];
$_SESSION['choices']= array_fill_keys(range(2,5),'');
$choices[1] = $choices[2] = $choices[3]	= $choices[4] = $choices[5]	= '';
$pattern[1]	= "<label for='naf1'>Section</label>%s<br>";
$pattern[2]	= "<label for='naf2'>Division</label>%s<br>";
$pattern[3]	= "<label for='naf3'>Groupe</label>%s<br>";
$pattern[4]	= "<label for='naf4'>Classe</label>%s<br>";
$pattern[5]	= "<label for='naf5'>Sous-classe</label>%s<br>";
$emptyOptionLabel = getDBText($language,16);
 
// Variable to fill form '/frontend/views/$language/formActivities.php'
$post		= getActivities($iCustomerId);
// get NAF-Elements
$aNaf[1]	= getNAFsection($language);	// Section
 
// Optionlist 'section' (niveau 1)
$emptyOptionLabel = getDBText($language,16); // option '<choisir un élément>'
$lstNaf[1] = new OptListSelect('naf[1]', ['id'=>'naf1', 'required'=>'required']);
$lstNaf[1]->addOption(new OptListOption('', '', ['label'=>$emptyOptionLabel]));
$sToSelect = !empty($_SESSION['naf1Selected']) ? $_SESSION['naf1Selected']: '';
if (!empty($aNaf[1])) {
	foreach($aNaf[1] as $aItem){
		$aOptions = ($sToSelect == $aItem['code']) ? ['selected'=>'selected']: [];
		$lstNaf[1]->addOption(new OptListOption($aItem['id'], $aItem['code'].' - '.$aItem[$language.'_text'], $aOptions));
	}
	unset($aItem);
	$choices[1] = sprintf($pattern[1], $lstNaf[1]);
}
// Other Optionlists
for($i=2;$i<5;$i++){
	$lstNaf[$i] = new OptListSelect("naf[$i]", ['id'=>"naf$i",]);
	$lstNaf[$i]->addOption(new OptListOption('', '', ['label'=>$emptyOptionLabel]));
	$choices[$i] = sprintf($pattern[$i], $lstNaf[$i]);
}
unset($i);
 
$_SESSION['choices'] = $choices;

Fichier 2 (vue):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
        
$choices = $_SESSION['choices'];
?>
 
<form method="post" name="tabForm" action="<?= URL_SITE; ?>/frontend/mainFormHandler.php" data-tab="activity">
	<input type="hidden" id="id0" name="id" value="<?= $post['id']; ?>" >
	<div class="formFlex">
		<fieldset><legend>Activités répertoriées</legend>
			<p class="note">
				Ici vous pouvez sélectionner des activités selon la nomenclature NAF de l'INSEE (rév. 2) 
				ce qui peut vous permettre de rechercher les entreprises qui ont la même activité.<br>
				Ces codes sont indépendants de celui du registre du commerce. Ce sont ceux qui correpondent
				le mieux aux activités du client.
			</p>
			<fieldset><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
				<?= $choices[1], $choices[2], $choices[3], $choices[4], $choices[5]; ?>
			</fieldset>
		</fieldset>
	</div>
</form>
 
<script type="module" src="../js/customerActivitiesHandler.js"></script>

Fichier 3 (AJAX)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const
	nafs	= document.querySelectorAll("[id*='naf']")
	,root	= window.location.origin
	;
 
console.log(nafs); // OK: 4 nodelist select
nafs[2].disabled=false;
 
function handleChange(lastList) {
	var xhr = new XMLHttpRequest()
		//,sel // remplacé par l'argument lastList
		;
	//console.log(lastList.value); // 3 (pour section C)
	xhr.onreadystatechange = function(){
		if (xhr.readyState == 4 && xhr.status == 200){
			console.log(xhr.responseText);
			//document.getElementById('xxxxxxxxxxxxxxxxxxxxxxxxxxxxx').innerHTML = xhr.responseText;
		}
	}
	xhr.open('POST', 'ajaxNaf.php', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
	//sel = document.getElementById('yyyyyyyyyyyyyyyyyyyyyyyyyyyy');
}
 
if (nafs.length){
	nafs.forEach(function(curNaf, index){
		curNaf.addEventListener('change', function(e){
			handleChange(curNaf);
		}, false );
	});
}

Je coince dans la fonction handleChange: je ne sais pas comment continuer.