javascript - multiple conditions to Show input field only if a specific option is selected

Question

我需要在开始时只显示以下选择表单：

<div class="col-md-3">
    <div class="form-group">
        <select class="form-control tagging tagging_gouvernorat" onchange="yesnoCheck()">
             <option disabled selected>Etat</option>
             <option id="noCheck" value="actif">Actif</option>
             <option id="yesCheck1" value="loue">Loué</option>
             <option id="yesCheck2" value="vendu">Vendu</option>
         </select>
    </div>
</div>

然后，如果<option id="noCheck" value="actif">Actif</option>选中，则不显示任何字段。the other fields are displayed only if one of these options is selected:

<option id="yesCheck1" value="loue">Loué</option>
<option id="yesCheck2" value="vendu">Vendu</option>

但我不知道该怎么办？

这是我的 html 和 javascript

function yesnoCheck() {
  if (document.getElementById("yesCheck1").selected) {
    document.getElementById("ifYes1").style.display = "block";
  } else {
    document.getElementById("ifYes1").style.display = "none";
  }
  if (document.getElementById("yesCheck2").selected) {
    document.getElementById("ifYes2").style.display = "block";
  } else {
    document.getElementById("ifYes2").style.display = "none";
  }
}


function yesnoCheck1() {
  if (document.getElementById("agence").selected) {
    document.getElementById("vagence").style.display = "block";
  } else {
    document.getElementById("vagence").style.display = "none";
  }
}

<div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
  <form id="social" class="section social">
    <div class="info">
      <h5 class="">Situation actuelle du Bien</h5>
      <div class="row">
        <div class="col-md-11 mx-auto">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <select class="form-control tagging tagging_gouvernorat" onchange="yesnoCheck()">
                  <option disabled selected>Etat</option>
                  <option id="noCheck" value="actif">Actif</option>
                  <option id="yesCheck1" value="loue">Loué</option>
                  <option id="yesCheck2" value="vendu">Vendu</option>
                </select>
              </div>
            </div>
            <div class="col-md-3" id="ifYes1" style="display: none;">
              <div class="form-group">
                <input id="basicFlatpickr" value="Date de la fin de contrat" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Date de la fin du contrat" id="df" name="df">
              </div>
            </div>
            <div class="col-md-3" id="ifYes2" style="display: none;">
              <div class="form-group">
                <input id="basicFlatpickr" value="Date de la vente" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Date de la vente">
              </div>
            </div>
            <div class="col-md-3" id="prix">
              <div class="form-group">
                <input type="text" class="form-control mb-4" id="prix" placeholder="Prix final" name="price">
              </div>
            </div>
            <div class="col-md-3" id="how">
              <div class="form-group">
                <select class="form-control" name="how" onchange="yesnoCheck1()">
                  <option disabled selected value="comment">Comment ?</option>
                  <option id="seul" value="seul">Seul</option>
                  <option id="ag" value="viaagence">Via une agence</option>
                </select>
              </div>
            </div>
            <div class="col-md-3" id="vagence" style="display: none;">
              <div class="form-group">
                <input type="text" class="form-control mb-4" id="vag" placeholder="Agence" value="" name="agence">
              </div>
            </div>
          </div>
        </div>
      </div>
  </form>
  </div>
</div>

标签： javascripthtml