Манипулировать опциями в форме с помощью Javascript

Question

Я много гуглил, но я новичок в JS и HTML.У меня есть проблема, которую я не могу решить.

У меня есть эта HTML-форма (надеюсь, я скопирую ее правильно):

    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-2 pt-0">Geschlecht</legend>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="s_radio" id="s_radio1" value="m" checked="checked">
                    <label class="form-check-label" for="s_radio1">
                        M&auml;nnlicher K&ouml;rper
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="s_radio" id="s_radio2" value="f">
                    <label class="form-check-label" for="s_radio2">
                        Weiblicher K&ouml;rper
                    </label>
                </div>
            </div>
    </fieldset>


    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-2 pt-0">K&ouml;rperfettanteil</legend>
            <div class="col-sm-10">
                <div class="form-check">
                    <select class="form-control" id="kfaform">
                    <option value="3.5">3-4 %</option>
                    <option value="6.5">6-7 %</option>
                    <option value="11">10-12 %</option>
                    <option value="15">15 %</option>
                    <option value="20">20 %</option>
                    <option value="25">25 %</option>
                    <option value="30">30 %</option>
                    <option value="35">35 %</option>
                    <option value="40">40 %</option>
                    </select>
                </div>
            </div>
        </div>
    </fieldset>

Первая кнопка-переключатель отмечена стандартно, а параметры вконтрольная форма в порядке, как это.

Но если пользователь установил второй переключатель, форма должна включать другие параметры, такие как:

<option value="11">10-12 %</option>
<option value="16">15-17 %</option>
<option value="21">20-22 %</option>
<option value="25">25 %</option>
<option value="30">30 %</option>
<option value="35">35 %</option>
<option value="40">40 %</option>
<option value="45">45 %</option>
<option value="50">50 %</option>

И параметры, которые были в форме ранее, должны быть удалены.

Очень важно: он должен идти в обоих направлениях, что означает, что если вы снова нажмете первую кнопку-переключатель, он должен вернуться в первое состояние.

Надеюсь, вы понимаете мою проблему.

Я благодарен за каждый совет.

Заранее спасибо!

Answer 1

Я решил проблему Enhzflep, найденный так:

  setMannOptions();
  //
  document.getElementById("s_radio1").addEventListener("click", function() {
    $('#kfaform option').prop('selected', function() {
        return this.defaultSelected;
    });
  $("#kfaform option:first").attr("selected", true);
    setMannOptions();
  });
  document.getElementById("s_radio2").addEventListener("click", function() {
    $('#kfaform option').prop('selected', function() {
        return this.defaultSelected;
    });

  ("#kfaform option:first").attr("selected", true);
    setWeibOptions();
  });
}

Теперь все работает отлично.

Огромное спасибо за очень быстрый ответ!

Answer 2

Я добавил классы в ваш список опций.Затем я использую JS для прослушивания щелчков по вашим переключателям и скрываю и отображаю соответствующие параметры соответственно:

function start() {
  setMannOptions();
  //
  document.getElementById("s_radio1").addEventListener("click", function() {
    setMannOptions();
  });
  document.getElementById("s_radio2").addEventListener("click", function() {
    setWeibOptions();
  });

}

function setMannOptions() {
  var weib = document.getElementsByClassName("weib");
  if (weib) {
    for (x = 0; x < weib.length; x++) {
      weib[x].style.display = "none";
    }
  }
  //
  var mann = document.getElementsByClassName("mann");
  if (mann) {
    for (x = 0; x < mann.length; x++) {
      mann[x].style.display = "block";
    }
  }
}

function setWeibOptions() {
  var mann = document.getElementsByClassName("mann");
  if (mann) {
    for (x = 0; x < mann.length; x++) {
      mann[x].style.display = "none";
    }
  }
  //
  var weib = document.getElementsByClassName("weib");
  if (weib) {
    for (x = 0; x < weib.length; x++) {
      weib[x].style.display = "block";
    }
  }

}

document.onload = start();

<fieldset class="form-group">
  <div class="row">
    <legend class="col-form-label col-sm-2 pt-0">Geschlecht</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="s_radio" id="s_radio1" value="m" checked="checked">
        <label class="form-check-label" for="s_radio1">
                        M&auml;nnlicher K&ouml;rper
                    </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="s_radio" id="s_radio2" value="f">
        <label class="form-check-label" for="s_radio2">
                        Weiblicher K&ouml;rper
                    </label>
      </div>
    </div>
</fieldset>


<fieldset class="form-group">
  <div class="row">
    <legend class="col-form-label col-sm-2 pt-0">K&ouml;rperfettanteil</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <select class="form-control" id="kfaform">
          <option value="" selected></option>
          <option value="3.5" class="mann">3-4 %</option>
          <option value="6.5" class="mann">6-7 %</option>
          <option value="11" class="mann">10-12 %</option>
          <option value="15" class="mann">15 %</option>
          <option value="20" class="mann">20 %</option>
          <option value="25" class="mann">25 %</option>
          <option value="30" class="mann">30 %</option>
          <option value="35" class="mann">35 %</option>
          <option value="40" class="mann">40 %</option>
          <option value="11" class="weib">10-12 %</option>
          <option value="16" class="weib">15-17 %</option>
          <option value="21" class="weib">20-22 %</option>
          <option value="25" class="weib">25 %</option>
          <option value="30" class="weib">30 %</option>
          <option value="35" class="weib">35 %</option>
          <option value="40" class="weib">40 %</option>
          <option value="45" class="weib">45 %</option>
          <option value="50" class="weib">50 %</option>
        </select>
      </div>
    </div>
  </div>
</fieldset>