Chained Dropdown in flask, get data from sqlite database

Question

I am trying to get a html select tag with different counties (getting from database), when the user have selected a county, I want another select tag to enable and show the cities in that county (I have the data in a sqlite database, where the county id is in the city database). I am using python in Pycharm, with flask and I haven't found any good tutorials.

Is there an easy way of using some extension to flask? I saw something about sijax, but I never understood how to use it.

The code I have is something like this, but I guess the city-part has to be created through some javascript thingy:

        <div class="form-group">
            <label for="inputCounty">County</label>
            <select class="form-control" id="select_county" name="select_county">
                <option value="">Choose county</option>
                {% for county in counties %}
                    <option value="{{ county.id }}">{{ county.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="inputCity">City</label>
            <select class="form-control" id="select_city" name="select_city">
                <option value="">Choose city</option>
                {% for city in cities %}
                    <option value="{{ city.id }}" class="{{ city.county }}">{{ city.name }}</option>
                {% endfor %}
            </select>
        </div>

I tried a "chained"-javascipt plugin but it didn't work, but that's why I have class in the option tags.

Right now the counties and all cities are sent to the html template, but I don't think that will be sustainable later on because I want to add another dropdown with places in the cities as well, so then I have to send a lot of data that never will be used.

You could try to implement 'place holder'-dropdown elements which are hidden first. Populate and make them visible after the user has selected a county in the first dropdown list. Flask would just provide resp. return the html-template and javascript should do the rest — albert
– albert, Commented Jun 6, 2015 at 20:25
No, there's absolutely no way for Flask to do this alone without refreshing the entire page. To do what you're describing, you'd have to send an AJAX request back to the server and manipulate the response with JavaScript. Jinja2 can't help you there; that's just the way HTTP works. I'd respond in a more detailed way, but this question is pretty open-ended and I don't know what your stack looks like. — Chase Ries
– Chase Ries, Commented Jun 7, 2015 at 2:34

Celeo · Accepted Answer · 2015-06-08 15:54:46Z

3

In your head, add a handler for changing the values of the selects:

<script type="text/javascript">
    $("#select_county").change(function() {
        $.ajax({
            type: "POST",
            url: "{{ url_for('select_county') }}",
            data: {
                county: $("#select_county").val()
            },
            success: function(data) {
                $("#select_city").html(data);
            }
        });
    });
</script>

This uses jquery.change to detect when the county select is changed and jquery.ajax to send that selected value to your backend, which would be something like:

@app.route('/select_county', methods=['POST'])
def select_county():
    ret = ''
    for entry in ...your_database_query...:
        ret += '<option value="{}">{}</option>'.format(entry)
    return ret

This list of <option> tags is then inserted into the second select through jquery.html.

answered Jun 8, 2015 at 15:54

Celeo

5,7138 gold badges41 silver badges44 bronze badges

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

2 Comments

ruggalainen Over a year ago

Thank you! It worked after some issues :) Made the ret like this: ret += '<option value="%i">%s</option>' % (entry[2], entry[0])

Cleb Over a year ago

@ruggalainen: Not sure if still relevant, but I added another solution here which makes use of this nice answer by Celeo.

Collectives™ on Stack Overflow

Chained Dropdown in flask, get data from sqlite database

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related