IF this === this AND this === this 显示/隐藏 div Javascript

Question

我正在尝试创建一个 HTML/CSS/JS 表单以供离线使用。

到目前为止，我已经根据选择为div 功能创建了show() 和hide()。

如果选择了Cloth 和White，则显示一个div，但我无法让它工作。

下面是我的尝试：

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

更新：感谢 TiiJ7 和 freedomn-m 的 cmets 和建议

您必须按值搜索，而不是按 option 文本搜索。

该函数在 if 内有一个 if && 运算符，因此需要进行调整。

你必须有一个监听器来捕捉这些select的变化并进行比较。

我假设您已经将 jquery 库添加到您的项目中。

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>