How to implement If... else structure in jQuery?

Question

Here is my jsp snippet it uses spring mvc

 <form:select path="noOfBankDetails" id = "noOfBankDetails">
 <form:option value="0">0</form:option>
 <form:option value="1">1</form:option>
 <form:option value="2">2</form:option>
 <form:option value="3">3</form:option>
 <form:option value="4">4</form:option>
 </form:select>

 <!-- All the following divs are hidden -->
 <div id = "firstBankDetail"> 
<div id = "secondBankDetail">
<div id = "thirdBankDetail">
<div id = "fourthBankDetail">

Here is my jQuery snippet which shows all the divs when dropdown noOfBankDetails is changed

  $("#noOfBankDetails").change(function(){
           $("#firstBankDetail").show();
           $("#secondBankDetail").show();
           $("#thirdBankDetail").show();
           $("#fourthBankDetail").show();
        });

It works perfectly fine... But i want to achieve something different Pseudo of it goes like this

IF noOfBankDetails IS 0 THEN 
    Show none of divs
ELSE IF noOfBankDetails IS 1 THEN 
    Show div firstBankDetail
ELSE IF noOfBankDetails IS 2 THEN 
    Show div firstBankDetail
    Show div secondBankDetail
and so on..

How should i go about doing this in jQuery. I am a beginner in jQuery. Please provide some guidance.

You have laid out the logic. Just convert those into jquery code line by line. Thats it.. Worry about optimization later — karthikr
– karthikr, Commented Sep 30, 2013 at 13:49

tymeJV · Accepted Answer · 2013-09-30 13:50:15Z

4

jQuery if else is JavaScript if else FYI, anyways:

 $("#noOfBankDetails").change(function(){
  if (this.value == 0) {
      //do 0 stuff
  } else if (this.value == 1) {
      //do 1 stuff
  } else if (value == 2) {
      //do 2 stuff
  }
 });

Or a switch:

$("#noOfBankDetails").change(function(){
    switch(this.value) {
        case 0: //do 0 stuff
        break

        case 1: //do 1 stuff
        break;

        case 2: //do 2 stuff
        break;
    }
});

answered Sep 30, 2013 at 13:50

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

Reinstate Monica Cellio Over a year ago

+1 for the switch suggestion, and saving me finishing typing up an example :)

Blazemonger Over a year ago

case-switch (in Chrome) is much slower than if-else -- possibly because it's being converted into if-else statements inside the JS engine.

Philip Giuliani · Accepted Answer · 2013-09-30 13:52:45Z

0

You dont need jQuery for a if/elseif/else. You just can use simple Javascript:

I hope i have no errors. Should work.

$("#noOfBankDetails").change(function(){
  var value = $(this).val();

  if(value == 0) {
    $("#firstBankDetail").show();
  }
  else if(value == 1) {
    $("#secondBankDetail").show();
  }
  else if(value == 2) {
    $("#thirdBankDetail").show();
    $("#fourthBankDetail").show();
  }
});

answered Sep 30, 2013 at 13:52

Philip Giuliani

1,3673 gold badges20 silver badges38 bronze badges

Comments

Somnath Kharat · Accepted Answer · 2013-09-30 13:55:24Z

0

$("#noOfBankDetails").change(function () {
    if ($(this).val() == 0) {
        $("#firstBankDetail").hide();
        $("#secondBankDetail").hide();
        $("#thirdBankDetail").hide();
        $("#fourthBankDetail").hide();
        $("#secondBankDetail").hide();
        $("#thirdBankDetail").hide();
        $("#fourthBankDetail").hide();
    } else if ($(this).val() == 1) {
        $("#firstBankDetail").show();
    } else if ($(this).val() == 2) {
        $("#firstBankDetail").show();
        $("#secondBankDetail").show();
    } else if ($(this).val() == 3) {
        $("#firstBankDetail")..show();
        $("#secondBankDetail").show();
        $("#secondBankDetail").show();
    }
    //Continue the same logic below
    else if ($(this).val() == 4) {}
});

answered Sep 30, 2013 at 13:55

Somnath Kharat

3,5952 gold badges31 silver badges51 bronze badges

1 Comment

Reinstate Monica Cellio Over a year ago

I think you need to check your code. You're repeating the same actions in some of it.

Collectives™ on Stack Overflow

How to implement If... else structure in jQuery?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related