CODEWITHSUNDEEP
javascriptjqueryhtml
Stacker
Stacker

Reputation: 113

How can I check if any dropdown in a class is empty?

I have multiple date of birth dropdowns (day, month, year). How can I have a div show if any of them are null?

I've tried something like this

if ($(".MyClass").val() === "") {
    $("#showDiv1").show();
} else {
    $("#showDiv1").hide();
}

with a div like 

<div id="showDiv1">
  My Div
</div>

<select>
  <option value="">Choose Value..</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select>
  <option value="">Choose Value..</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

This only seems to work if it's just one select, rather than multiple selects.

Thanks,

fiddle: https://jsfiddle.net/62a1pdsk/

Upvotes: 1

Views: 131

Answers (6)

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try this:

$(".myclass").change(function() {
if($(".myclass").val()===""){          
    $("#showDiv1").show();
   } else {
  $("#showDiv1").hide();
   } 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDiv1">
  My Div
</div>

<select class="myclass">
  <option value="">Choose Value..</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="myclass">
  <option value="">Choose Value..</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to filter out all elements that do not have value and then use the count of returned element as condition to show hide div:

 var unselectedmyclass = $(".MyClass").filter(function(){return $(this).val() == ""});
 if ( unselectedmyclass.length) {
   $("#showDiv1").show();
 }else{
   $("#showDiv1").hide();
 }

Working Demo

Upvotes: 1

suman
suman

Reputation: 728

Try this

 $("select").on("change",function(){
   var a = $("select:first").val();
    var b =$("select:last").val();
    if(a=="" || b=="" )
      $("#showDiv1").show();
    else
     $("#showDiv1").hide();

  });

https://jsfiddle.net/62a1pdsk/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

This would do the trick:

$('.MyClass').change(function() {
  $('#showDiv1').toggle(!!$('.MyClass').filter(function() {
    return !this.value;
  }).length);
});

-jsFiddle-

Upvotes: 2

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Try this 

$("select").change(function() {
  var flag = 0;
  $("select").each(function(a, b) {
    if ($(this).val() == "") {
      flag = 1;
    }
    flag == 1 ? $("#showDiv1").show() : $("#showDiv1").hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDiv1">
  This div is display if any dropdown value is ""
</div>

<select>
  <option value="">Choose Value..</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select>
  <option value="">Choose Value..</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

Upvotes: 1

Vladu Ionut
Vladu Ionut

Reputation: 8193

// Add your javascript here
$(function() {


  function ValidateSelect() {
    var isValid = true;
    $(".MyClass").each(function() {
      if ($(this).val() === "") {
        isValid = false;
      }

    });
     return isValid;
  }
 
  $(".MyClass").change(function() {
    if (ValidateSelect()) {
      $("#showDiv1").hide();
    } else {
      $("#showDiv1").show();
    }

  })


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="showDiv1">
My Div
</div>

    <select class="MyClass"> 
    <option value="">Choose Value..</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>

    <select class="MyClass">
    <option value="">Choose Value..</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
  </body>

$(function() {


  function ValidateSelect() {
    var isValid = true;
    $(".MyClass").each(function() {
      if ($(this).val() === "") {
        isValid = false;
      }

    });
     return isValid;
  }
  debugger;
  $(".MyClass").change(function() {
    if (ValidateSelect()) {
      $("#showDiv1").hide();
    } else {
      $("#showDiv1").show();
    }

  })

});

Upvotes: 1

Related Questions