I have a location form with three "select" (choices list) : country, area and department. These "select" have by default all the list of country, area and department. I want to let my user choose a country first or an area or a department.

What I want to do:
When an user choose a country, datas in area change depending of it. Same between area and department.

What I have:

• When I choose a country first then an area, datas auto-update works between country and area but with area to department, the AJAX request is not launched.
• But if I choose directly an area then the AJAX request is launched but it does not update the data in department.
• However, in the form, when I comment the part concerning country and area auto-update, the AJAX request is launched and the auto-update between area and department works.

Here my form :

//src/Form/LocationType.php
class LocationType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('country', EntityType::class, [
        'class' => Country::class,
            ])
            ->add('area', EntityType::class, [
                'class' => Area::class,
                'required' => false
            ])
            ->add('department', EntityType::class, [
                'class' => Department::class,
                'required' => false
            ]);
            
        //The part I comment for makes the auto-update between area and department works
        $formArea = function(FormInterFace $form, Country $country = null) {
            if($country === null) {
                $form->add('area', EntityType::class, [
                    'class' => Area::class,
                    'required' => false
                ]);
            }
            else {
                $areas = $country->getAreas();
                $form->add('area', EntityType::class, [
                    'class' => Area::class,
                    'choices' => $areas,
                    'required' => false
                ]);
            }
        };

        $builder->get('country')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formArea){
                $country = $event->getForm()->getData();
                $formArea($event->getForm()->getParent(), $country);
            }
        );
        //

        $formDepartment = function(FormInterFace $form, Area $area = null) {
            if($area === null) {
                $form->add('department', EntityType::class, [
                    'class' => Department::class,
                    'required' => false
                ]);
            }
            else {
                $departments = $area->getDepartments();
                $form->add('department', EntityType::class, [
                    'class' => Department::class,
                    'choices' => $departments,
                    'required' => false
                ]);
            }
        };

        $builder->get('area')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formDepartment){
                $area = $event->getForm()->getData();
                $formDepartment($event->getForm()->getParent(), $area);
            }
        );
}

And JS code with AJAX call:

//assets/js/selectCountryAreaDepartment.js
window.onload = () => {
    let country = document.querySelector("#location_country");

    country.addEventListener("change", function() {
        let form = this.closest("form");
        let data = this.name + "=" + this.value;
        console.log(data);
        fetch(form.action, {
            method: form.getAttribute("method"),
            body: data,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
            }
        })
        .then(response => response.text())
        .then(html => {
            let content = document.createElement("html");
            content.innerHTML = html;
            let area = content.querySelector("#location_area");
            document.querySelector("#location_area").replaceWith(area);
            console.log(area);

        })
        .catch(error => {
            console.log(error);
        })
    });

    let area = document.querySelector("#location_area");

    area.addEventListener("change", function() {
        let formArea = this.closest("form");
        let dataArea = this.name + "=" + this.value;
        //console.log(formArea);
        console.log(dataArea);
        fetch(formArea.action, {
            method: formArea.getAttribute("method"),
            body: dataArea,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
            }
        })
        .then(response => response.text())
        .then(html => {
            let contentArea = document.createElement("html");
            contentArea.innerHTML = html;
            let department = contentArea.querySelector("#location_department");
            document.querySelector("#location_department").replaceWith(department);
            console.log(department);
        })
        .catch(error => {
            console.log(error);
        })
    });

}

This code is based on this French tutorial : https://www.youtube.com/watch?v=f7tdb30evUk