In my effort to introduce conditionality into the "Search Filters Section" of a Wordpress theme, I am facing some challenges due to the unconventional selectors I have to work with.
Within this section, there is a dropdown menu featuring various options (taxonomies referred to as "tipo-de-montaje" or in English, "types-of-seating"), and it is necessary for specific elements to appear based on the selected dropdown value.
The issue arises when trying to switch between different options in the dropdown. It seems that the functionality works only once, requiring a page reload to properly hide the current element and display the new one.
My primary question is whether AJAX is an absolute necessity in this scenario?
Here is my second attempt at resolving the issue:
//Retrieve the value of the selected option from the dropdown
var montajeVal = $('input[name="tipos-de-montaje"]').val();
//Containers of the elements to be shown or hidden
const escuelaMax = $('[data-name="max-capacidad-escuela"]').parent();
const auditorioMax = $('[data-name="max-capacidad-auditorio"]').parent();
//Initially hide these containers
escuelaMax.hide();
auditorioMax.hide();
//Show the appropriate container based on the selected value
if (montajeVal == "escuela") {
escuelaMax.show();
auditorioMax.hide();
} else if (montajeVal == "auditorio") {
escuelaMax.hide();
auditorioMax.show();
}
//This implementation only works once :(
//Consider using a JSON data structure containing values to compare $montajeVal with, iterate through them in a loop to achieve the desired outcome instead of relying solely on IF statements
// The JSON could simply be: ['escuela', 'auditorio']
// Although I've used just two values for simplicity, the actual list is more extensive.