Question

Im using bootstrap 4, html, css, js the lot when trying to do this.

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. 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.

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

试试这个

<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>

Hide/Show multiple textfields based on select option

1 个答案: