Streaming live at 10am (PST)

Help with some prototype filtering with selects / dropdown fields


#1

Hey there,

this may seem to be a bit odd and its not a webflow native problem, but I m currently making some prototype for a filter system, that needs to be done for a usability testint scenario.

Its currently just a site with three dropdowns on top.

You can select one item on one dropdown, then a result will be shown under the filter area.
But you can also select the first option AND another one from the other select fields. Then a correspondend result will be shown.

I made a workaround with the mixitup-plugin, but its not made for that kind of a purpose. Because what is the problem:

http://mixitup-filtering-webflow.webflow.io/

Mixitup shows elements which have a specific class or subclass.
But when I select the first option, it displays ALL sorts of class and combo-class objects.

You can see this live here:

When choosing the first option, all elements are shown.

E.g.

.category-1-1
but also
.category-1-1.category-2-1
.category-1-1.category-2-2 and so on.

But I only want to see ONE element.

Is there a way to achieve that. Its really really a rough explanation and because I m not a native speaker it might sound a bit odd.
But maybe you ll get it.

Its not THAT important, its just for "fun" and it can be solved by other persons. But I want to have a personal solution and I m really eager in getting new knowledge..so...

Regards
Daniel


#2

There are some debug information within the divs that will show the values, that are coming from the select field itself.

e.g. 1-1 und 2-1 means that the first option from select field no. 1 and the first option from select field no. 2 is selected.

Here you can see a console output log from the mixitup.js plugin.

The active filter is ".category-1-1" but the script also displays all combinations (0-9)


#3

Hi, @Daniel_Schultheiss

Lets start from fixing the fact that you have 2 divs with the same ID


#4

Thanks @sabanna,

I removed one id.
Didnt know that webflow would accept two identical #ids ?!


#5

It shouldn't. Usualy, it will not let you add an ID which already exist. But you probably copied div with existing ID and its duplicated it.


#6

Yeah probably. Well it wasnt any problem for the script at all :).


#7

Ok, Now tell me if I got you correct.
You want to that if you choose "category-1-1" in the filter, results would show you only the elements that are having ONLY this one class?


#8

Yeah Anna, thats right. Currently all kind of combinations are spit out :wink:. Same is when you choose two combinations, then these AND the ones with three classed are given out. Thats not what i want. I do know that this is not intended by the original script, but maybe there is a solution.

Select ONE, give out one, not the ones with comboclasses.

Select two only give out elements with only the two classes, not also the ones with three.

It would also be okay if the script gives me only one result (limit show elements to one, that would also solve my problem as a workaround).

Best regards
Daniel


#9

I updated and made a more minimalized version of the filter results, so that it gets a bit easier to follow :slightly_smiling:
http://mixitup-filtering-webflow.webflow.io/


#10

Maybe there is some minimalistic jquery alternative out there. To ask the states of each dropdown-field and make therefore a query to display some certain, specific div-class or id or not.

That a maybe easier than the other way around, but i m not a coder :).
Thats maybe some question for @samliew :P.

Regards
Daniel


#11

I made come jquery workaround, but this one only works for each element individually as there is no loop to check if one of the other two select elements are selected.

http://mixitup-filtering-webflow.webflow.io/

BUT there is no implementation of combination.

e.g.
If you select value 1 from SELECT1 AND value 2 from SELECT2, then display:block the element item1-1-item2-2

My code snippet:

$("#select1").change(function () {
  var selected_option = $('#select1').val();
    if (selected_option === '.category-1-1') {	
      $('#category-1-0, #category-2-1, #category-2-2, #category-2-3, #category-2-4, #category-3-1, #category-3-2').css('display', 'none');
      $('#category-1-1').css('display', 'block');
 		}
    if (selected_option != '.category-1-1') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-2, #category-2-3, #category-2-4, #category-3-1, #category-3-2').css('display', 'none');
 		}  
})

$("#select2").change(function () {
  var selected_option = $('#select2').val();
    if (selected_option === '.category-2-1') {	
      $('#category-1-0, #category-1-1, #category-2-2, #category-2-3, #category-2-4, #category-3-1, #category-3-2').css('display', 'none');
      $('#category-2-1').css('display', 'block');
 		}
    if (selected_option === '.category-2-2') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-3, #category-2-4, #category-3-1, #category-3-2').css('display', 'none');
      $('#category-2-2').css('display', 'block');
 		}    
    if (selected_option === '.category-2-3') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-2, #category-2-4, #category-3-1, #category-3-2').css('display', 'none');
      $('#category-2-3').css('display', 'block');
 		}
        if (selected_option === '.category-2-4') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-2, #category-2-3, #category-3-1, #category-3-2').css('display', 'none');
      $('#category-2-4').css('display', 'block');
 		}
})

$("#select3").change(function () {
  var selected_option = $('#select3').val();
    if (selected_option === '.category-3-1') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-2, #category-2-3, #category-2-4, #category-3-2').css('display', 'none');
      $('#category-3-1').css('display', 'block');
 		}
    if (selected_option != '.category-3-1') {	
      $('#category-1-0, #category-1-1, #category-2-1, #category-2-2, #category-2-3, #category-2-4, #category-3-2').css('display', 'none');
 		}  
})

#12

Crazy, I tried something else (reminds me of my old IT lessons in school) ...

<script>
$("#select1, #select2, #select3").change(function () {

var selected_option = $('#select1').val();
var selected_option2 = $('#select2').val();
var selected_option3 = $('#select3').val();

var elems = selected_option+selected_option2+selected_option3;
var arr = jQuery.makeArray( elems );
var none = document.getElementsByClassName('mix');

$(none).css('display', 'none');   
console.log( arr );
if ( arr == '') {
	$('#c00').css('display', 'block');
}
$('#'+arr).css('display', 'block');     


});

$("#reset").click(function(){
	$('select').prop('selectedIndex', 0);
  var none = document.getElementsByClassName('mix');
  $(none).css('display', 'none');
  $('#c00').css('display', 'block');
}); 

</script>

This works perfectly. It does not rely on the mixitup script anymore.


#13

Wow! You did a great job! :astonished: :+1:


#14

Thanks Anna, surely not a perfect semantic solution but since this is only be a rough idea, its a good solution. Thanks anyway for your help. Cheers, Daniel


#15