Displaying table as per selected values in dropdown in flask python

Question

Below is the flask application. I have a list of values in dropdown. So I need a table corresponding to value selected in the dropdown . But right now, all the value as table is displayed 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>

Actual output

Expected output Only selected value as table should be displayed

Can you try removing SELECTED from your option tag ?

Umair Mohammad
– Umair Mohammad

2022-10-16 14:54:52 +00:00
Commented Oct 16, 2022 at 14:54 — Umair Mohammad
– Umair Mohammad, Commented Oct 16, 2022 at 14:54
Tried. Still same : (

user11740857
– user11740857

2022-10-16 14:58:34 +00:00
Commented Oct 16, 2022 at 14:58 — user11740857
– user11740857, Commented Oct 16, 2022 at 14:58

Umair Mohammad · Accepted Answer · 2022-10-16 15:14:37Z

2

Couple of feedbacks:

We're looping through all tickers and print them as table row.
We're setting table innerHTML directly as clear text.

We can try something like this:

function update_selected_option_value(value) {
  document.getElementById('res_head').innerHTML = value;
  document.getElementById('res_data').innerHTML = value;
}

<select onchange="update_selected_option_value(this.value)">
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Mango">Mango</option>
<select>

<table name="ticker" method="GET" action="/">
  <tr>
    <th id="res_head">---</th>
  </tr>
  <tr>
    <td id="res_data">---</td>
  </tr>
</table>

answered Oct 16, 2022 at 15:14

Umair Mohammad

4,6432 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11740857 Over a year ago

Thanks. Keeping the same logic, why cannot we print a just a value. Example <span id="res"></span> and then <script>function update_selected_option_value(value) {document.getElementById('res').innerHTML = value;}</script> . Just printing the value somewhere on the webpage?

Umair Mohammad Over a year ago

Yes, that should also work.

Collectives™ on Stack Overflow

Displaying table as per selected values in dropdown in flask python

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related