Skip Navigation

[Resuelto] Add default text to multiselect taxonomy filters

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem:

I am having an issue with adding default text to multi-select taxonomy filters in Toolset, as the default_label only works for select taxonomy filters.

Solution:

To add a value-less option with the desired text to the multi-select input, use the following JavaScript code:

document.addEventListener("DOMContentLoaded", function() {
    // Get the select element
    const selectElement = document.querySelector('select[name="wpv-offering[]"]');
 
    // Create a new option element
    const defaultOption = document.createElement('option');
    defaultOption.value = 'any';
    defaultOption.text = 'Any';
 
    // Set the new option as the default selected option
    defaultOption.selected = true;
 
    // Add the new option to the beginning of the select element
    selectElement.insertBefore(defaultOption, selectElement.firstChild);
});

This code waits for the DOM content to be loaded, gets the select element, creates a new option element, sets it as the default selected option, and adds it to the beginning of the select element.

This support ticket is created hace 1 año. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 6 respuestas, has 3 mensajes.

Last updated by daveG-7 hace 1 año.

Assisted by: Christopher Amirian.

Autor
Mensajes
#2593275

4+ years ago, I suggested adding default text to multi-select taxonomy filters, but was told that default_label only worked for select taxonomy filters. You added making this work for multi-select taxonomy filters work too as a feature request - I wondered if this ever got accomplished, or if it ever will. It doesn't make sense that this isn't available, since you can use default text with field multi-select filters, and those operate the same as the taxonomy ones.

Here's that old thread: https://toolset.com/forums/topic/adding-a-default-entry-to-multiple-select-search-filters/

#2593543

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

Hi Dave

I checked the internal tickets and found the original feature request, but it didn't get worked on, I'm afraid. (We normally track other requests and add them to the same ticket to help determine priorities, but there weren't any other requests.)

I did just do a test now directly manipulating the shortcode arguments in case the feature would work and it just wasn't possible to select it in the UI, but it doesn't unfortunately.

The only solution would be to use JS to add a value-less option to the multiselect input with the text you require.

#2593821

Thanks for looking into this. Unfortunately, I don't know much JS. I know you don't generally do custom code here, but since this is something that probably should be included with your plugins, is there any chance you could provide a little code to get me pointed in the right direction?

Thanks.

#2594757

Christopher Amirian
Supporter

Languages: Inglés (English )

Hi there,

I would do my best to come up something but I need a link to your website that contains the select box and tell me please what should be the text pf the default option.

Thank you.

#2595451

Thank!. The filter is at hidden link - it's the "Offerings" taxonomy multiselect. The text I'd like there is "Any". Let me know if you need login details for the site.

Thanks again,

Dave

#2595975

Christopher Amirian
Supporter

Languages: Inglés (English )

Hi Dave,

Please use the Javascript code below:

document.addEventListener("DOMContentLoaded", function() {
    // Get the select element
    const selectElement = document.querySelector('select[name="wpv-offering[]"]');

    // Create a new option element
    const defaultOption = document.createElement('option');
    defaultOption.value = 'any';
    defaultOption.text = 'Any';

    // Set the new option as the default selected option
    defaultOption.selected = true;

    // Add the new option to the beginning of the select element
    selectElement.insertBefore(defaultOption, selectElement.firstChild);
});


This code waits for the DOM content to be loaded and then gets the <select> element by its name attribute. It creates a new <option> element with the value "any" and the text "Any". The selected attribute is set to true to make it the default selected option. Finally, the new option is added to the beginning of the <select> element using the insertBefore method.

Thank you.

#2596475

That worked perfectly, thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.