Skip to content

[HELP] Multifiltering doesnt work correct with 2 selects #192

@maniaxatwork

Description

@maniaxatwork

Filterizr version
Which version of Filterizr do you have installed in your project?
I'm using Version 2.2.4

Describe the issue in details
In my setup there are 2 selects

Image

My code is looking like that:
`
document.addEventListener('DOMContentLoaded', () => {
var filter1 = document.querySelector('#referenzen--filter-branche select');
var filter1Val = filter1.value;
var filter2 = document.querySelector('#referenzen--filter-schlagwort select');
var filter2Val = filter2.value;
var filter = 'all';

	const filterizrOptions = {
		gutterPixels: 0,
		layout: 'sameWidth',
		multifilterLogicalOperator: 'and',
		setupControls: false,
		filterOutCss: {
			opacity: 0,
			transform: 'scale(0.5)'
		},
		filterInCss: {
			opacity: 1,
			transform: 'scale(1)'
		},
		callbacks: {
    		onFilteringStart: function() { },
    		onFilteringEnd: function() { },
    		onShufflingStart: function() { },
    		onShufflingEnd: function() { },
    		onSortingStart: function() { },
    		onSortingEnd: function() { }
		}
	}; 
	const filterizr = new Filterizr('.filtr-container', filterizrOptions);
	
	filter1.addEventListener ("change", function () {
		filterizr.toggleFilter(filter1Val);
		filter1Val = this.value;
		filterizr.toggleFilter(filter1Val);
	});
	
	filter2.addEventListener ("change", function () {
		filterizr.toggleFilter(filter2Val);
		filter2Val = this.value;
		filterizr.toggleFilter(filter2Val);
	});
});

`

As stated in different issues i tried everything to get this to work.

Filtering with the first select shows the correct result.
As soon as I try to filter this list with the second select, my resultlist is emtpy.
Even if I switch the select back to "all" nothing is shown.

Am I doing it that wrong?

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions