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>

Answer 1

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>