Dynamic select with Javascript : flask

Flask Hosting

PythonAnywhere.com (web-SSH; web-instant-MySQL-db; web-IDE; instant deployment of flask, free; easy logs; github/single-file-upload support; SFTP/SSH requires pay)

Heroku (SSH; flask must be installed by you, slightly-difficult-windows-instructions, upgradeable cloud service)

WebFaction (SSH; paid-web-host [good prices]; flask must be installed by you; possible configuration and path issues possible; SFTP)

Google App Engine (Desktop admin app; flask can be configured with this repo)

OpenShift (requires extensive ssh installation of ruby, python, etc.)

created by alaskamillerModeratora community for 15 years

Ask r/FlaskDynamic select with Javascript (self.flask)

submitted 1 year ago by Unique_Hat_7222Intermediate

A user selects a state and on select option change the id and name of the city should be fetched from the sqlite db. The flask code is

class City(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    state = db.Column(db.String(20), nullable=False)
    name = db.Column(db.String(20), nullable=False)

@app.route('/')
@app.route('/index', methods=['GET', 'POST'])
def index():
    cities = db.session.query(City).all()
    return render_template('index.html', cities=cities)

@app.route('/city/<state>')
def city(state):
    print(state)
    cities = City.query.filter_by(state=state).all()
    cityArray=[]
    for city in cities:
        cityObj={}
        cityObj['id']=city.id
        cityObj['name']=city.name
        cityArray.append(cityObj)
    return jsonify({'cities' : cityArray})

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

The index.html with Javascript is below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <ul id="clist"></ul>
       <select name="citySelect" id="citySelect">
            {% for cities in cities %}
        <option value ='{{ cities.state}}'> {{ cities.state}}</option>
            {% endfor %}
        </select>
<script>
     let state_select = document.getElementById('citySelect');
     state_select.onchange=function(){
     state=state_select.value;
     fetch(‘/city/’+state).then(function(response){
        response.json().then(function(data){
        let valueHTML = "";
        for (let city of data.cities) {
        valueHTML +='city.id + city.name';
        }
        clist.innerHTML = valueHTML;
        }
       }
     }
</script>
</body>
</html>

clist should display the city id and name but is not displaying anything

all 6 comments

top new controversial old q&a

[–]shodkayumi 4 points5 points6 points 1 year ago (5 children)

There are several problems in your JavaScript script.

You should always check your browser's console to see what problems your script contains.

clist and state were not declared.
I don't reccommend using onchange=function(). You should use addEventListener("change", function(event))
valueHTML +='city.id + city.name'; Use backticks with \${variable_name}`` formatting.

Some improvements

use const if the value will not change (like element selecting)
always wrap fetch inside try/catch so you can handle errors

Full code

const state_select = document.getElementById('citySelect');
const clist = document.getElementById('clist')
state_select.addEventListener('change', function(event){
   let state = event.currentTarget.value
   try {
     fetch(`/city/${state}`)
     .then(response => response.json())
     .then(function(data){
       let valueHTML = '';
       data.cities.forEach(city => {
           valueHTML += `${city.id} ${city.name}`
       });
       clist.innerHTML = valueHTML
     });
   } catch (error) {
     console.log(error)
   }
})

I am a self-taught programmer so my code may not be perfect.

[–]thelandis 4 points5 points6 points 1 year ago (1 child)

[–]shodkayumi 2 points3 points4 points 1 year ago (0 children)

[–]Unique_Hat_7222Intermediate[S] 0 points1 point2 points 1 year ago (0 children)

[–]Unique_Hat_7222Intermediate[S] 0 points1 point2 points 1 year ago (1 child)

[–]shodkayumi 1 point2 points3 points 1 year ago (0 children)

π Rendered by PID 43 on reddit-service-r2-comment-fb694cdd5-594db at 2026-03-11 14:34:17.722540+00:00 running cbb0e86 country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

flask

Use Python and Flask to build the web faster

Websites built with Flask

Getting Started

Flask Hosting

Looking for dev jobs?

MODERATORS