CODEWITHSUNDEEP
jquery
Victor Njoroge
Victor Njoroge

Reputation: 353

Jquery: filter function

I go through a list of classes using the filter function. if the drop down is empty then an error styling is added.

problem. I would like to hide and show other div id's if the condition is fulfilled, i.e if all the dropdowns contain a selected value

This is my code for adding styling to an empty dropdown

 $(".dropdown_select").filter(function(){
 return $(this).val() == "";
 }).css("border-color", "#FF0000");

But how do i go about hiding and showing a other two div id's?? i.e only if all dropdowns are filled, i would like to

$(".step-2").fadeIn("slow");
$(".step-1").fadeOut("slow");

Upvotes: 0

Views: 1121

Answers (2)

Tomalak
Tomalak

Reputation: 338416

For styling I'd recommend using toggleClass() with a function argument instead of filter() and css():

$(document).on("change", ".dropdown_select", function () {
  var $emptyOnes = $(".dropdown_select")
                   .filter(function () { return this.value == ""; });

  if ($emptyOnes.length == 0) {
    $(".step-1").fadeOut("slow");
    $(".step-2").fadeIn("slow");
  } 

  $(this).toggleClass("empty", this.value == "");
});

where tre CSS definition reads:

.empty {
  border-color: #FF0000;
}

Upvotes: 1

sasi
sasi

Reputation: 4328

var $children = $(".dropdown_select").children();

if($children.length === $children.filter(".dropdown_select").length) {
   $(".step-2").fadeIn("slow");
   $(".step-1").fadeOut("slow");
}

Upvotes: 1

Related Questions