If Select val == 1 or 2 then

Question

I'm trying to make it so when my #display-select is == display1, display2 or display4 (but NOT 3) then it shows a div. But I can't figure out how to make that or statement.

$(function() {

            $('#display-select').change(function(){
                if($('#display-select').val() == 'display1') {
                    $('#greenhouse-gas').show(); 
                } else {
                    $('#greenhouse-gas').hide(); 
                } 
            });
        });

Changed to this, still not working:

$(function() {

            $('#display-select').change(function(){
                if($('#display-select').val() === 'display1' || 'display2') {
                    $('#greenhouse-gas').show(); 
                } else {
                    $('#greenhouse-gas').hide(); 
                } 
            });
        });

At it's simplest: `||` is OR, you can chain expression checks together in the `if`. — Igor, Aug 11 '17 at 15:18
I would tell you what you did/doing wrong but you did not share that code so it would be guessing. — Igor, Aug 11 '17 at 15:21
beware [`==`](https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons) typically `===` is a better option — Liam, Aug 11 '17 at 15:21
The issue is your added code on the right of the `||` is evaluated as a whole expression and a string with a value is evaluated as truthy. You have to repeat the whole comparison check again with each value you want to test. There are other ways to test if a value falls in a range like using an array of possible values and then check if the value you want to test falls in the array. — Igor, Aug 11 '17 at 15:22

Grizzly · Accepted Answer · 2017-08-11T15:25:18.497

2

If "display3" is the only option that you do not want to show the div then restructure your conditional statement

$(function() {

            $('#display-select').change(function(){
                if($('#display-select').val() === 'display3') {
                    $('#greenhouse-gas').hide(); 
                } else {
                    $('#greenhouse-gas').show(); 
                } 
            });
        });

Let me know if this helps.

I have created a jsfiddle for you to observe how it works.

edited Aug 11 '17 at 15:25

answered Aug 11 '17 at 15:18

Grizzly

5,873
8
56
109

@J.Doe43 You're welcome! If this answer best suits your needs, then please mark it as accepted – Grizzly Aug 11 '17 at 15:26
Will do, gotta wait 2 minutes! – J. Doe43 Aug 11 '17 at 15:28

score 0 · Answer 2 · answered Aug 11 '17 at 15:19

0

if($('#display-select').val() != 'display3')

answered Aug 11 '17 at 15:19

isaace

3,336
1
9
22

score 0 · Answer 3 · answered Aug 11 '17 at 15:21

You can check if the value is display3 and then hide the greenhouse-gas div.

See the below implementation.

$(function() {
  $('#display-select').change(function() {
    if ($('#display-select').val() === 'display3') {
      $('#greenhouse-gas').hide();
    } else {
      $('#greenhouse-gas').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="display-select">
  <option value="display1">Display 1</option>
  <option value="display2">Display 2</option>
  <option value="display3">Display 3</option>
  <option value="display4">Display 4</option>
</select>

<div id="greenhouse-gas">Greenhouse gas</div>

Shivaji Kokate · Answer 4 · 2017-08-11T15:35:30.957

Make it simple, if you only trying to check display (but NOT 3) instead of #display-select is == display1, display2 or display4 it will more easy. So check here only negative check see below in your case.

$(function() {
            $('#display-select').change(function(){
                if($('#display-select').val() !== 'display') {
                    $('#greenhouse-gas').hide(); 
                } else {
                    $('#greenhouse-gas').show(); 
                } 
            });
        });

If this is not possible in your case, then use case statement.

$(function() {
            $('#display-select').change(function(){
            var selectedValue = this.val();
                 switch (selectedValue ) {
                    case 'display1':
                    case 'display2':
                    case 'display4':
                    $('#greenhouse-gas').show(); 
                    break;
                    case 'display3':
                    $('#greenhouse-gas').hide(); 
                    break;
                    }   
                 });
        }

Hope this will help to you.

If Select val == 1 or 2 then

4 Answers4