javascript顯示無阻止

Question

我正在使用JavaScript隱藏HTML頁上的表單，這些表單是使用WTForms生成的。 JS代碼如下。 當我第一次選擇“ Flap”時，我可以看到正在顯示弗拉普形式，但是當我在“ flap”之后選擇“向下”時，仍然顯示弗拉普形式。 是相同的，當我單擊“”。

如果沒有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>