Symfony5表单多选(选项列表)数据使用AJAX自动更新

Question

我有一个带有三个"；选择"；(选项列表(：国家、地区和部门。这些"；选择"；默认情况下，具有国家、地区和部门的所有列表。我想让我的用户先选择一个国家或地区或部门。

我想做的事情：
当用户选择一个国家/地区时，区域中的数据会随国家/地区而变化。区域和部门之间也是如此。

我所拥有的：

• 当我先选择一个国家，然后选择一个地区时，数据自动更新在国家和地区之间工作，但在地区到部门的情况下，AJAX请求不会启动
• 但是，如果我直接选择一个区域，则会启动AJAX请求，但不会更新部门中的数据
• 然而，在表格中，当我评论有关国家和地区自动更新的部分时，AJAX请求被启动，地区和部门之间的自动更新工作正常

这里是我的表格：

//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);
}
);
}

与AJAX调用JS代码：

//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);
})
});
}

此代码基于此法语教程：https://www.youtube.com/watch?v=f7tdb30evUk

Answer 1

通过在formModifiersformArea和formDepartment中删除null大小写的add((，可以避免"；重置"；使用其他选择时选择:

//src/Form/LocationType.php
// …
// formModifier
$formArea = function(FormInterFace $form, LocationCountry $country = null) {
if($country != null)
{
$areas = $country->getAreas();
$form->add('area', EntityType::class, [
'class' => LocationArea::class,
'choices' => $areas,
'placeholder' => 'select now an area',
'required' => false
]);
}
};
$builder->get('country')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formArea){
$country = $event->getForm()->getData();
$formArea($event->getForm()->getParent(), $country);
}
);
// formModifier
$formDepartment = function(FormInterFace $form, LocationArea $area = null) {
if($area != null) 
{
$departments = $area->getDepartments();
$form->add('department', EntityType::class, [
'class' => LocationDepartment::class,
'choices' => $departments,
'placeholder' => 'select now a department',
'required' => false,
'choice_label' => function ($departments) {
return '['.$departments->getCode().']-'.$departments->getName();
}
]);
}
};

area.addEventListener被更新区域选择删除，因此有必要在更新区域选择后重新激活eventListener，因此我创建了一个函数area_addEnventListener()

window.onload = () => {
let country = document.querySelector("#location_country");
country.addEventListener("change", function() {
let form = this.closest("form");
let data = this.name + "=" + this.value;
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);
area_addEnventListener(area);
})
.catch(error => {
console.log(error);
})
});
let area = document.querySelector("#location_area");
area_addEnventListener(area);
}
function area_addEnventListener(area_select) {
area_select.addEventListener("change", function() {
let formArea = area_select.closest("form");
let dataArea = area_select.name + "=" + area_select.value;
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);
})
.catch(error => {
console.log(error);
})
});
}