首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Javascript操作表单中的选项

使用Javascript操作表单中的选项
EN

Stack Overflow用户
提问于 2018-09-26 08:40:55
回答 2查看 40关注 0票数 0

我用谷歌搜索了很多,但我在JS和HTML方面还是个新手。我有一个我不能解决的问题。

我确实有那个html表单(希望我复制正确):

代码语言:javascript
复制
    <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>

第一个单选按钮是选中标准的,控件窗体中的选项就是这样。

但是,如果用户选中了第二个单选按钮,则表单应该包括其他选项,如:

代码语言:javascript
复制
<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>

并且应该删除之前表单中的选项。

非常重要:它必须是双向的,这意味着如果您再次单击第一个单选按钮,它应该会更改回第一个状态。

希望你能理解我的问题。

我非常感谢你的每一条建议。

提前谢谢你!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-26 09:05:18

我已将类添加到您的选项列表中。然后,我使用JS监听您的单选按钮的点击,并相应地隐藏和显示相应的选项:

代码语言:javascript
复制
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();
代码语言:javascript
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2018-09-27 15:58:04

我这样解决了enhzflep发现的问题:

代码语言:javascript
复制
  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();
  });
}

现在一切都正常了。

非常感谢非常快速的响应!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52508364

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档