Flask实现下拉框选中值对应的数据表展示问题

我开发了一个Flask应用，下拉框包含['Com1', 'Com2', 'Com3', 'Com4']选项。需求是选择下拉框中的某个值后，页面仅展示该值对应的数据表，但当前页面会显示所有选项对应的数据表。

相关代码 #

app.py

from flask import Flask, render_template
import pandas as pd
import sqlalchemy as sal
from sqlalchemy import create_engine
import pyodbc 
import urllib


app = Flask(__name__)

list_ticker = ['Com1', 'Com2', 'Com3', 'Com4']


@app.route('/', methods=['GET'])
def dropdown():
    colours = list_ticker
    return render_template('template.html', tickers = colours)

if __name__ == "__main__":
    app.run(port = 8080)

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown</title>
</head>
<body>
<select name="ticker" method="GET" action="/" onchange="update_selected_event(event)">
    {% for ticker in tickers %}
        <option value="{{ticker}}" SELECTED>{{ticker}}</option>
    {% endfor %}
</select>
<br></br>

<span>The selected table is actually </span>
<table id="res" name="ticker" method="GET" action="/">
{% for ticker in tickers %}
  <tr>
    <th>{{ticker}}</th>
    <th>{{ticker}}</th>
  </tr>
  <tr>
    <td>{{ticker}}</td>
    <td>{{ticker}}</td>
  </tr>
  {% endfor %}
</table>



<script>function update_selected_event(event) {document.getElementById('res').innerHTML = event.target.value;}
</script>
</body>
</html>

输出情况 #

• 实际输出：页面加载后显示所有选项对应的数据表
• 期望输出：仅展示下拉框选中值对应的数据表内容

解决方案 #

方案1：纯前端JavaScript处理

修改模板文件，初始只渲染默认选中的表结构，切换下拉框时动态生成对应内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown</title>
</head>
<body>
<select name="ticker" onchange="update_selected_event(event)">
    {% for ticker in tickers %}
        <option value="{{ticker}}" {% if loop.first %}selected{% endif %}>{{ticker}}</option>
    {% endfor %}
</select>
<br><br>

<span>The selected table is actually </span>
<table id="res" border="1">
  <!-- 初始显示第一个选项的表 -->
  <tr>
    <th>{{tickers[0]}}</th>
    <th>{{tickers[0]}}</th>
  </tr>
  <tr>
    <td>{{tickers[0]}}</td>
    <td>{{tickers[0]}}</td>
  </tr>
</table>

<script>
function update_selected_event(event) {
    const selectedTicker = event.target.value;
    // 生成对应的数据表结构
    const tableHtml = `
      <tr>
        <th>${selectedTicker}</th>
        <th>${selectedTicker}</th>
      </tr>
      <tr>
        <td>${selectedTicker}</td>
        <td>${selectedTicker}</td>
      </tr>
    `;
    document.getElementById('res').innerHTML = tableHtml;
}
</script>
</body>
</html>

方案2：后端结合前端（动态获取数据）

如果需要从后端数据库获取对应表的真实数据，可通过GET请求传递选中值，再渲染对应内容：

1. 修改app.py：

from flask import Flask, render_template, request

app = Flask(__name__)

list_ticker = ['Com1', 'Com2', 'Com3', 'Com4']

# 模拟从数据库获取对应表数据的函数，实际场景替换为真实查询逻辑
def get_table_data(ticker):
    return {
        'headers': [ticker, ticker],
        'rows': [[ticker, ticker]]
    }

@app.route('/', methods=['GET'])
def dropdown():
    # 默认选中第一个选项
    selected_ticker = request.args.get('ticker', list_ticker[0])
    table_data = get_table_data(selected_ticker)
    return render_template('template.html', 
                           tickers=list_ticker,
                           selected_ticker=selected_ticker,
                           table_data=table_data)

if __name__ == "__main__":
    app.run(port=8080)

2. 修改template.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown</title>
</head>
<body>
<select name="ticker" onchange="this.form.submit()">
    {% for ticker in tickers %}
        <option value="{{ticker}}" {% if ticker == selected_ticker %}selected{% endif %}>{{ticker}}</option>
    {% endfor %}
</select>
<form method="GET" action="/" style="display: inline;"></form>
<br><br>

<span>The selected table is actually </span>
<table id="res" border="1">
  <tr>
    {% for header in table_data.headers %}
    <th>{{header}}</th>
    {% endfor %}
  </tr>
  {% for row in table_data.rows %}
  <tr>
    {% for cell in row %}
    <td>{{cell}}</td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>
</body>
</html>

说明 #

• 方案1适合静态数据展示，无需后端交互，切换更流畅；
• 方案2适合需要从数据库或其他数据源动态获取对应表数据的场景，确保数据实时性。

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