如何在Flask网页中实现选择下拉选项后展示对应HTML文件内容？

Let's break this down into actionable steps to get your Flask app working exactly as you want. The main issues in your current code are invalid HTML attributes and missing backend logic to handle form submissions and render the right table.

Step 1: Fix the Frontend Template #

First, let's correct your HTML template (save this as list.html in your templates folder) to fix syntax issues and properly pass data to the backend:

{% extends "layout.html" %} 
{% block content %} 
<!-- DESCRIPTION --> 
<div class="row"> 
  <div class="col c12 aligncenter"> 
    <h2>Protein List</h2> 
    <!-- Use url_for to safely reference your Flask route -->
    <form class="form-horizontal" action="{{ url_for('analyze') }}" id="textform" method="post" enctype="multipart/form-data"> 
      <h3>Select a Protein Group</h3> 
      <!-- Fixed label and select structure -->
      <label for="LoP">Choose an option:</label>
      <select id="LoP" name="LoP"> 
        <!-- Replace invalid HREF with value attribute to pass data -->
        <option value="Muc">Muc</option> 
        <option value="Sph">Sph</option> 
        <option value="Gle">Gle</option> 
        <option value="gens">gens</option> 
        <option value="ses">ses</option> 
      </select> 
      <div class="row"> 
        <div class="col c12"> 
          <br/>
          <input type="submit" class="button" value="Submit"/>
          <input type="reset" class="button" value="Clear"/> 
        </div>
      </div>
    </form>

    <!-- Section to display the table after submission -->
    {% if table_to_render %}
      <div class="mt-4">
        {% include table_to_render %}
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}

Key fixes here:

• Replaced invalid HREF attributes on <option> with value (this is how form data is sent to the backend)
• Fixed unclosed/improperly placed <label> tag
• Used url_for('analyze') to safely reference your Flask route instead of a raw variable
• Added a conditional section to render the selected table template after submission

Step 2: Implement Flask Backend Logic #

In your main Flask file (e.g., app.py), add a route that handles both GET (form display) and POST (submission processing) requests:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/analyze', methods=['GET', 'POST'])
def analyze():
    table_to_render = None
    # Handle both POST form data and GET query parameters
    selected_group = request.form.get('LoP') or request.args.get('LoP')
    
    if selected_group:
        # Map selected options to their respective table templates
        table_mapping = {
            'Muc': 'table1.html',
            'Sph': 'table2.html',
            'Gle': 'table3.html',
            'gens': 'table4.html',
            'ses': 'table5.html'
        }
        table_to_render = table_mapping.get(selected_group)
    
    # Render the main template with the table (if selected)
    return render_template('list.html', table_to_render=table_to_render)

@app.route('/')
def home():
    # Redirect to the analyze page or render the form directly
    return render_template('list.html')

if __name__ == '__main__':
    app.run(debug=True)

Step 3: Prepare Your Table Templates #

Create table1.html, table2.html, etc., in your templates folder. Here's an example for table1.html:

<h3>Table 1: Muc Proteins</h3>
<table border="1" cellpadding="8">
  <tr>
    <th>Protein ID</th>
    <th>Name</th>
    <th>Primary Function</th>
  </tr>
  <tr>
    <td>MUC-001</td>
    <td>Mucin 1</td>
    <td>Cell adhesion & protection</td>
  </tr>
  <tr>
    <td>MUC-002</td>
    <td>Mucin 2</td>
    <td>Mucus secretion & gut lining protection</td>
  </tr>
</table>

How It Works #

1. On first load (GET request), the form displays without any table.
2. When you select "Muc" and submit (POST request), the backend captures the LoP value, maps it to table1.html, and passes that template name back to the main page.
3. The main template uses {% include table_to_render %} to insert the content of table1.html into the page.
4. You can also share a direct link like http://localhost:5000/analyze?LoP=Muc to load the table via a GET request.

内容的提问来源于stack exchange，提问作者kesavan