根據選擇選項隱藏/顯示多個文本字段

Question

嘗試執行此操作時，我經常使用bootstrap 4，html，css，js。

我試圖顯示一些文本框，具體取決於選擇選項的選擇。

因此，如果我選擇“ adadelta”，我只希望顯示4個特定的文本框（數字類型），其他所有內容都保持隱藏。 應該提到的是，下面的表單位於一個彈出窗口中，該窗口運行良好，因此我只包含了表單本身。

我已經嘗試了各種JavaScript示例來解決類似情況，但是即使我嘗試document.getElementById等，它也沒有顯示文本框。

任何建議將不勝感激。

<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

嘗試這個

<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