javascript display none block

Question

私はHTMLページ上のフォームを非表示にするためにJavaScriptを使用していますが、これはWTFormsを使用して生成されます。 JSコードは以下の通りです。 最初に「Flap」を選択すると、表示されているflap_formが表示されますが、「flap」の後に「Down」を選択すると、flap_formはまだ表示されています。 ""をクリックすると同じです。

同様のロジックがPythonなしで動作しているように見えます - プレーンなHTMLを意味します。

<script type="text/javascript" charset="utf-8"> 
function showData() { 
    var theSelect = interface_form.interface_state; 
     if (theSelect[theSelect.selectedIndex].value == 'Down') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("form_flap").style.display = "none"; 
      } 
     if (theSelect[theSelect.selectedIndex].value == 'Flap') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("flap_form").style.display = "block"; 
      } 
     if (theSelect[theSelect.selectedIndex].value == '') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("flap_form").style.display = "none"; 
      } 
    } 
</script> 

フラスココード：

@app.route('/') 
def index(): 
    #global interface_form, form_flap, form_down, stime, etime, tkt, flap_form, down_form 
    interface_form = interface_state_form(request.form) 
    form_flap = flap_form(request.form) 
    form_down = down_form(request.form) 
    return render_template("test2.html",interface_form=interface_form,form_down=form_down,form_flap=form_flap) 

HTMLコード：フラップを非表示にするには、呼び出しに

<form method= POST name = interface_form id = interface_form onclick="showData()"> 
      <table> 
       {% for field in interface_form %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
</form> 
<script type="text/javascript" charset="utf-8"> 

<form method= POST name = form_down2 id = form_down2 style = "display:none" action="{{ url_for('service_down_manual') }}"> 
      <table> 
       {% for field in form_down %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
    <input id = "generate" name="generate" type=submit value=Next> 
</form> 

<form method= POST name = flap_form id = flap_form style = "display:none" action="{{ url_for('momentary_impact_flap_manual') }}"> 
      <table> 
       {% for field in form_flap %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
    <input id = "generate" name="generate" type=submit value=Next> 
</form> 

Answer 1

、あなたは他のコールとは異なるIDを使用しています。これを試してください

<script type="text/javascript" charset="utf-8"> 
function showData() { 
    var theSelect = interface_form.interface_state; 
    if (theSelect[theSelect.selectedIndex].value == 'Down') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "none"; 
     } 
    if (theSelect[theSelect.selectedIndex].value == 'Flap') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "block"; 
     } 
    if (theSelect[theSelect.selectedIndex].value == '') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "none"; 
     } 
} 
</script>