Question

I have this conditional select which generally works fine, but I would like to make some small tweaks. See my fiddle here.

If you select a brand, say, Apple, you get to select two models. If you select a model it works fine.

But (a) if you click “Select model” again (still with “Apple” selected in the first box), I would like to display all Apple items like before.

And (b) if you select another Apple model, nothing happens.

I guess the solution is in the if ($currentSelection != "showall") {}-statement, but I can’t get it to work.

Can anyone point me in the right direction?

Thanks.

Answer 1

I have updated your jsfiddle.

You were lacking some conditions:

if ($currentSelection != "showall") {
  $options.each(function(){
    if($(this).is("#"+$currentSelection)) //Show match
      $(this).parent().parent().fadeIn();
  });
  $options.not("#" + $currentSelection).parent().parent().fadeOut(); //Hide don't match
} else if($currentSelection == "showall"){ //If 'Select model'
  $options.parent().parent().fadeIn();
} else {
  $options.children().filter("." + $selectprod.val()).fadeIn();
}

If selected a model, you need to show all the options first so that the hidden options will be shown.