My app example involves sending a list of states and cities (blank list in GET request) in USA to HTML. User wants to select list of state and immediately on selection see the list of cities applicable to state that was selected. Then after selecting both the state and the city, user will post request with state and city name to the server. I want to know how to add JS oncondition event in my select tag in HTML for implementing it.

My Flask code:

    @app.route("/states")
    def states():
    df = pd.read_csv('df.csv')
    states = df['State'].to_list()
    states = set(states)
    states = list(states)
    states.sort()
    cities = []
    if request.method == 'POST':
        state = str(request.form['state'])
        cities = df[df['State'] == state]['City']
        return render_template('states.html', states = states, cities = cities)
    else:
        return render_template('states.html', states=states, cities=cities)

My HTML Code:

    <form action="{{ url_for('states') }}" method="POST">
    <label style="width: 200px; margin-left: 20px">Select state</label>
    <select name="state" style="margin-left: 20px">
         {% for states in states[0:] %}
         <option>{{ states|safe }}</option>
         {% endfor %}
    </select>
          <label style="width: 200px; margin-left: 20px">Select city</label>
    <select name="strike" style="margin-left: 20px">
         {% for cities in cities[0:] %}
         <option>{{ cities|safe }}</option>
         {% endfor %}
    </select>
    </form>
          <button type="submit" class="section_button" value="Submit">Submit</button>

I appreciate any guidance.