[Resolved] Add default text to multiselect taxonomy filters

[Author]

Posts

[daveG-7]

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/

[Nigel]

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.

[daveG-7]

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.

[Christopher Amirian]

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.

[daveG-7]

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

[Christopher Amirian]

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.

[daveG-7]

That worked perfectly, thank you!