javascript 显示 none 块

Question

我正在使用 Javascript 隐藏 HTML 页面上的表单，这些表单是使用 WTForms 生成的。 JS代码如下。当我第一次 select "Flap" 时，我可以看到 flap_form 正在显示，但是当我 select "Down" 在 "flap" 之后， 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>

javascript 显示 none 块

javascript display none block

html

javascript

python

wtforms