隱藏/顯示基於選擇選項的多個文本框

使用引導程序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>

來源

2017-08-05 ForgottenGhost

你可以添加你已經嘗試了一些什麼額外的位？ –

試過類似這樣的例子：https：//stackoverflow.com/questions/29463116/displaying-a-number-of-text-boxes-based-on-user-selection-from-dropdown – ForgottenGhost

試試這個

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

來源

2017-08-05 13:00:08

隱藏/顯示基於選擇選項的多個文本框

回答

相關問題