How to check for multiple values in a jquery IF statement

Question

I have the below code which shows/hides a div based on an option in a dropdown, however it only toggles when a user selects 1. There are a few items in my dropdown that I'd like to show the DIV for. For example, let's say I have values 1 through 8 in my dropdown, and I want to show a DIV when a user has selected 4, 6, and 7. I don't want the DIV to toggle off and hide if a user changes selection from 4 to 6 either.

    $(document).ready(function(){
    $('#TypeofAction').on('change', function() {
      if ( this.value == '1') 
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
        
});

logical OR || developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Arleigh Hix
– Arleigh Hix, Commented May 31, 2022 at 2:02

Jon P · Accepted Answer · 2022-05-31 02:12:41Z

1

Use an array to store the "On" values and check that using the boolean display variable in jquery's toggle:

$(document).ready(function() {
  $('#TypeofAction').on('change', function() {
    let onVals = ["4", "6", "7"];
    $("#business").toggle(onVals.includes(this.value));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="TypeofAction">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<div id="business">It's busness time!</div>

edited May 31, 2022 at 2:12

answered May 31, 2022 at 2:06

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

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

Comments

Ron · Accepted Answer · 2022-05-31 02:19:31Z

You can use switch() or you could write the if/else in completely different way.. but here it is:

switch (this.value) {
  case '1':
  case '4':
  case '6':
  case '7':
    $("#business").show();
    break;
  case '2':
    $("#business").hide();
    break;
  case '3':
    console.log('do something else..');
    break;
  default:
    console.log('Invalid selection..');
}

More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

You can also go the route of using multiple if conditions:

if ( this.value == 1 || this.value == 4 || this.value == 6 || this.value == 7 ) {
...
}elseif( this.value == 2 || this.value == 3 ){
...
}else{
...
}

Or you could add the valid values in an array, and check with indexOf()

if ([1,4,6,7].indexOf(this.value) > -1){
...
}

or replace indexOf() with includes():

if ([1,4,6,7].includes(this.value)){
...
}

Collectives™ on Stack Overflow

How to check for multiple values in a jquery IF statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related