IF this === this AND this === this show/hide div Javascript

Question

I'm attempting to create an HTML/CSS/JS form to be used offline.

So far, I've created the show() and hide() for div functionality based on a selection.

If Cloth & White are selected show one div but I can't get it to work.

Here is my attempt below:

if ($("#StartSelector").val() == "Cloth") &&
  if ($("#ColourField").val() == "White") {
    $('#Program').show();
    else {
      $('#Program').hide();
    }
  };

form {
  max-width: 900px;
  display: block;
  margin: 0 auto;
}

<form>
  <div class="form-group">
    <label for="StartSelector">What are you washing?</label>
    <select class="form-control" id="StartSelector">
      <option value="no">Select wash option</option>
      <option value="Cloth">Table Cloth & Napkins</option>
      <option value="HeavyDuty">Heavy Duty Work Wear</option>
      <option value="Kitchen">Kitchen Work Wear</option>
      <option value="Bed">Bed Linen</option>
      <option value="Curtains">Curtains</option>
      <option value="Bath">Bath Towels & Robes</option>
      <option value="Uniforms">Uniforms</option>
      <option value="Personal">Personal Clothing</option>
      <option value="Mops">Mops & Cleaning Textiles</option>
      <option value="Low">Filter for low temperatures</option>
    </select>
  </div>
  <div class="form-group" id="Colours">
    <label for="ColourDiv">Types of wash.</label>
    <select class="form-control" id="ColourField">
      <option value="no">Select wash option</option>
      <option value="White">White</option>
      <option value="Colours">Colours</option>
      <option value="Delicate">Delicate</option>
    </select>
  </div>
  <div class="form-group" id="Program" style="display: none;">
    <img src="Program1.png" alt="Program 1" width="auto" height="400">
  </div>
</form>

Duplicate of [How to specify multiple conditions in an if statement in javascript](https://stackoverflow.com/questions/8710442/how-to-specify-multiple-conditions-in-an-if-statement-in-javascript) — esqew, Aug 17 '21 at 15:57
It should be `if (condition && condition)` you have `if (condition) && another_if` - which is why you have a syntax error when you run the snippet. Change to `if ($("#StartSelector").val() == "Cloth" && $("#ColourField").val() == "White") {` - no `)` after "cloth" and no second `if` — freedomn-m, Aug 17 '21 at 16:48

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2021-08-17T17:27:50.320

Updated: Thank's TiiJ7 and freedomn-m for comments and suggestions

You must search by value and not by option text.

The function had an if inside an if after the && operator so adjustments were needed.

You must have a listener to capture the changes in these select and make comparisons.

I assume you have already added the jquery library to your project.

function myFunction() {
  if ($('#StartSelector :selected').val() == 'Cloth' &&
    $('#ColourField :selected').val() == 'White') {
    $('#Program').show();
  } else {
    $('#Program').hide();
  }
}


$(function() {
  $('#StartSelector, #ColourField').on('change', myFunction);
});

form {
  max-width: 900px;
  display: block;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form>
  <div class="form-group">
    <label for="StartSelector">What are you washing?</label>
    <select class="form-control" id="StartSelector">
      <option value="no">Select wash option</option>
      <option value="Cloth">Table Cloth & Napkins</option>
      <option value="HeavyDuty">Heavy Duty Work Wear</option>
      <option value="Kitchen">Kitchen Work Wear</option>
      <option value="Bed">Bed Linen</option>
      <option value="Curtains">Curtains</option>
      <option value="Bath">Bath Towels & Robes</option>
      <option value="Uniforms">Uniforms</option>
      <option value="Personal">Personal Clothing</option>
      <option value="Mops">Mops & Cleaning Textiles</option>
      <option value="Low">Filter for low temperatures</option>
    </select>
  </div>
  <div class="form-group" id="Colours">
    <label for="ColourDiv">Types of wash.</label>
    <select class="form-control" id="ColourField">
      <option value="no">Select wash option</option>
      <option value="White">White</option>
      <option value="Colours">Colours</option>
      <option value="Delicate">Delicate</option>
    </select>
  </div>
  <div class="form-group" id="Program" style="display: none;">
    <img src="Program1.png" alt="Program 1" width="auto" height="400">
  </div>
</form>

Why is `includes` needed? There is an option with the literal value `Cloth` — TiiJ7, Aug 17 '21 at 16:35
"firstly..." - `$("select").val()` is the same as `$("select > option:selected")[0].value` - ie it's the `value=` of the selected option, nothing to do with the text, so `.includes` is just confusing: [confirmation](https://jsfiddle.net/bmscfyw5/) — freedomn-m, Aug 17 '21 at 16:45
secondly, you've completely skipped over the actual issue - OPs incorrect usage of `&&` and quietly fixed it. — freedomn-m, Aug 17 '21 at 16:46
Thanks for the comments, I made some adjustments to the answers following the suggestions. — ℛɑƒæĿᴿᴹᴿ, Aug 17 '21 at 17:29
Thank you for this, that makes sense =) For the next step, would I need to copy and paste the function X amount of times for all the variations or is there a steamlined way of doing this. Not looking for the solution, just a steer in the right direction. — Anthony Whitefield, Aug 18 '21 at 08:45

IF this === this AND this === this show/hide div Javascript

1 Answers1