Question

我在Google上搜索了很多，但是我是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

我已将类添加到您的选项列表中。然后，我使用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>

Answer 2

我解决了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();
  });
}

现在一切正常。

非常感谢，以便快速响应！

使用Javascript处理表单中的选项

2 个答案: