隐藏/显示基于选择选项的多个文本框

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

隐藏/显示基于选择选项的多个文本框

回答

相关问题