javascript display none block

Question

我使用Javascript隐藏HTML页面上的表单，这些表单是使用WTForms生成的。 JS代码如下。 当我第一次选择＆＃34; Flap＆＃34;时，我可以看到flap_form被显示，但是当我选择＆＃34; Down＆＃34;在＆＃34; flap＆＃34;之后，仍然显示flap_form。当我点击＆＃34;＆＃34;。

时也一样

类似的逻辑似乎在没有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>

Flask代码：

@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 code：

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