複数のテキストフィールドを選択オプションに基づいて非表示/表示する

これを行うときに、ブートストラップ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

複数のテキストフィールドを選択オプションに基づいて非表示/表示する

答えて

関連する問題