Simplify a Jquery filter script

Question

Can this script be simplified so that I don't have to specifically define the class attr just in case there are additional types added.

The JQuery

$(".devfilter select").change(function(){
  $( ".devfilter select option:selected").each(function(){
      if($(this).attr("value")==="Current"){
          $(".property.Upcoming").fadeOut("slow");
          $(".property.Completed").fadeOut("slow");
          $(".property.Current").fadeIn("slow");
        }
      if($(this).attr("value")==="Upcoming"){
          $(".property.Current").fadeOut("slow");
          $(".property.Completed").fadeOut("slow"); 
          $(".property.Upcoming").fadeIn("slow");
        }
      if($(this).attr("value")==="Completed"){
          $(".property.Current").fadeOut("slow");
          $(".property.Upcoming").fadeOut("slow");
          $(".property.Completed").fadeIn("slow");
      }
      if($(this).attr("value")==="*"){
          $(".property.Current").fadeIn("slow");
          $(".property.Upcoming").fadeIn("slow");
          $(".property.Completed").fadeIn("slow");
      }
  });
}).change();

The HTML

<p class="devfilter">
<select name="development-filter">
    <option value="*">All</option>
    <option value="Current">Current</option>
    <option value="Upcoming">Upcoming</option>
    <option value="Completed">Completed</option>

<div class="more classes property Upcoming" data-type="Upcoming">Upcoming 1</div>
<div class="more classes property Current" data-type="Current">Current 1</div>
<div class="more classes property Completed" data-type="Completed">Completed 1</div>
<div class="more classes property Completed" data-type="Completed"> Completed  2</div>
<div class="more classes property Upcoming" data-type="Upcoming">Upcoming 2</div>
<div class="more classes property Current" data-type="Current">Current 2</div>

Thanks Said

Is the select multiple? You're looping through selected values as if it is, but there is no multiple attribute in your example. — Rory McCrossan
– Rory McCrossan, Commented Jul 16, 2014 at 6:44

Rory McCrossan · Accepted Answer · 2014-07-16 06:50:41Z

2

As the select is not allowing multiple selections, there is no need to use $.each on the options, you can retrieve the selected option using val() and then build the selector like this:

$(".devfilter select").change(function() {
    $(".property").fadeOut("slow");
    var value = $(this).val();
    var selector = value == '*' ? '.property' : '.property.' + value;
    $(selector).fadeIn("slow");
}).change();

Example fiddle

answered Jul 16, 2014 at 6:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amin Jafari Over a year ago

then what if the * option is selected?

Rory McCrossan Over a year ago

@AminJafari Yeah, I noticed that, just fixed it.

Sudharsan S · Accepted Answer · 2014-07-16 06:46:25Z

0

Try this

$(".devfilter select").change(function(){

  $( ".devfilter select option:selected").each(function(){

          $(".property").fadeOut("slow");
          $(".property"+"."+$(this).data("type")).fadeIn("slow");

  });
}).change();

answered Jul 16, 2014 at 6:46

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

Said Over a year ago

I overlooked to mention that there are other classes as well in the div, have updated the question

Collectives™ on Stack Overflow

Simplify a Jquery filter script

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related