根据选择选项隐藏/显示多个文本字段

Question

Im using bootstrap 4, html, css, js the lot when trying to do this. 尝试执行此操作时，我经常使用bootstrap 4，html，css，js。

I'm trying to show some text boxes depending on the choice of the select option. 我试图显示一些文本框，具体取决于选择选项的选择。

So if I choose "adadelta" I'd like to have only 4 specific text boxes(number type) show and everything else remain hidden. 因此，如果我选择“ adadelta”，我只希望显示4个特定的文本框（数字类型），其他所有内容都保持隐藏。 Should mention that the below form in hosted in a popover window which works fine, as such I've only included the form itself. 应该提到的是，下面的表单位于一个弹出窗口中，该窗口运行良好，因此我只包含了表单本身。

I've tried various javascript examples for similar situations but its just not showing the text boxes even when I try document.getElementById etc. 我已经尝试了各种JavaScript示例来解决类似情况，但是即使我尝试document.getElementById等，它也没有显示文本框。

Any suggestions would be much appreciated. 任何建议将不胜感激。

<form>
          <div class="form-group">
              <label for="epochEdit">Epochs:</label>
              <input type="number" class="form-control" id="epochEdit"> 

              <label for="batchEdit">Batch Size:</label>
              <input type="number" class="form-control" id="batchEdit">
          </div>

          <div class="form-group">
              <label for="optChoose">Optimizer:</label>
              <select class="form-control" id="optChoose">
                  <option selected>Open this menu</option>
                  <option value="sgd">sgd</option>
                  <option value="adadelta">adadelta</option>
                  <option value="rmsprop">rmsprop</option>
                  <option value="adam">adam</option>
                  <option value="adamax">adamax</option>
                  <option value="adagrad">adagrad</option>
                  <option value="nadam">nadam</option>
              </select>               
          </div>

          <div class="form-group">

          <fieldset disabled>
            <div class="form-group">
              <label for="disabledNote">Note:</label>
              <input type="text" id="disabledNote" class="form-control" placeholder="Optimizers will use keras default values!">
            </div>
          </fieldset>

              <label for="lr">Learning Rate:</label>
              <input type="number" class="form-control" id="lr">

              <label for="rho">Rho:</label>
              <input type="number" class="form-control" id="rho">

              <label for="epsilon">Epsilon:</label>
              <input type="number" class="form-control" id="epsilon">

              <label for="decay">Decay:</label>
              <input type="number" class="form-control" id="decay">

              <label for="b1">Beta #1:</label>
              <input type="number" class="form-control" id="b1">

              <label for="b2">Beta #2:</label>
              <input type="number" class="form-control" id="b2">

              <label for="sDecay">Schedule Decay:</label>
              <input type="number" class="form-control" id="sDecay">

              <label for="moment">Momentum:</label>
              <input type="number" class="form-control" id="moment">

              <label for="nesterov">Nesterov:</label>
              <input type="checkbox" class="form-check-input" id="nesterov">

          </div>

          <button id="subSettings" class="bg-color-3 btn btn-info"> Submit </button>
      </form>

Answer 1

Try this 尝试这个

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    var el = '<label for="lr">Learning Rate:</label>\
        <input type="number" class="form-control" id="lr">\
        \
        <label for="rho">Rho:</label>\
    <input type="number" class="form-control" id="rho">\
       \
        <label for="epsilon">Epsilon:</label>\
    <input type="number" class="form-control" id="epsilon">\
        \
        <label for="decay">Decay:</label>\
    <input type="number" class="form-control" id="decay">\
       \
        <label for="b1">Beta #1:</label>\
    <input type="number" class="form-control" id="b1">\
         \
        <label for="b2">Beta #2:</label>\
    <input type="number" class="form-control" id="b2">\
     \
        <label for="sDecay">Schedule Decay:</label>\
    <input type="number" class="form-control" id="sDecay">\
     \
        <label for="moment">Momentum:</label>\
    <input type="number" class="form-control" id="moment">';

    function select() {
        var optSel = $("#optChoose").val();
        appendControls(optSel);
    }

    function appendControls(num) {
        $('#elcontainer').empty();
        if (num == "adadelta") {
            $('#elcontainer').append(el);
        }
    }
</script>
</head>
<body>

<div class="container">
<h2>Form control: input</h2>

<p>The form below contains two input elements; one of type text and one of type password:</p>


<div class="form-group">
    <label for="epochEdit">Epochs:</label>
    <input type="number" class="form-control" id="epochEdit">

    <label for="batchEdit">Batch Size:</label>
    <input type="number" class="form-control" id="batchEdit">
</div>

<div class="form-group">
    <label for="optChoose">Optimizer:</label>
    <select class="form-control" id="optChoose" onchange="select();">
        <option value="">Open this menu</option>
        <option value="sgd">sgd</option>
        <option value="adadelta">adadelta</option>
        <option value="rmsprop">rmsprop</option>
        <option value="adam">adam</option>
        <option value="adamax">adamax</option>
        <option value="adagrad">adagrad</option>
        <option value="nadam">nadam</option>
    </select>
</div>

<div class="form-group">

    <fieldset disabled>
        <div class="form-group">
            <label for="disabledNote">Note:</label>
            <input type="text" id="disabledNote" class="form-control"
                   placeholder="Optimizers will use keras default values!">
        </div>
    </fieldset>

    <div id="elcontainer"></div>


    <label for="nesterov">Nesterov:</label>
    <input type="checkbox" class="form-check-input" id="nesterov">

</div>

<button id="subSettings" class="bg-color-3 btn btn-info"> Submit</button>

</div>

</body>

根据选择选项隐藏/显示多个文本字段

问题描述

1 个解决方案

解决方案1
0 2017-08-05 13:00:08

根据选择选项隐藏/显示多个文本字段

问题描述

1 个解决方案

解决方案1 0 2017-08-05 13:00:08

解决方案1
0 2017-08-05 13:00:08