Flask Dynamic dependent dropdown list flask

I started reading into some flask application programming and I have been trying to get drop down menu to work, but so far I have had no luck. What I want to do is, when the user selects a Type of Food from the first dropdown list, it should get the corresponding list from the database and fill the second set of drop down list.

I'm trying this code with the app.py:

def get_food(foodkind):
    if foodkind not in food:                                                                 
        return jsonify([])
        return jsonify(food[foodkind])

And the select.html


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"

      $(document).ready(function() {
        $('#foodkind').change(function() {

          var foodkind = $('#foodkind').val();

          // Make Ajax Request and expect JSON-encoded data
            '/get_food' + '/' + foodkind,
            function(data) {

              // Remove old options

              // Add new items
              $.each(data, function(key, val) {
                var option_item = '<option value="' + val + '">' + val + '</option>'

      {{ form.foodkind() }}
      {{ form.food() }}

Finally, I do not know if it is correct, in the index.html I put:

    {% extends "layout.html" %}
{% block title %} Test {% endblock %}
{% block head %} 
    {{ super() }}
{% endblock %}
{% block body %}
    {% include "map.html" %}
    {% include "select.html" %}
{% endblock %}

Doing all this I get "'form' is undefined"