How to use HTML <select>
dropdown list which is prepopulated from flask - render_template
.
Here is the <select>
dropdown list which is prepopulated from flask-jinja2.
<div>
<select class="test-default" id="testTime">
{% for option in options %}
<option value={{ option }}>{{ option }}</option>
{% endfor %}
</select>
</div>
Script in test.html
,
function fetch_test_data(){
let test = $("#testTime").val();
axios({
method:"get",
url:"/test",
params: {
test
}
}).then(function (response) {
$(document.body).html(response.data)
});
}
And test.py
file - with app route and options
for dropdown.
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
options = ["0","7","14","30"]
return render_template("test.html", options=options)
In the above case how to use selected
attribute to display the selected value.
when a value is selected, The correct value is returned to the flask and rendered back. But dropdown visualization/list shows the first value instead of selected value?
What I have tried:
I'm able to get dropdown
select
for defined dropdown.
defined-dropdown
- for reference
<div>
<select class="test-default" id="testTime">
<option value=0>today</option>
<option value=7>week</option>
<option value=14>fortnight</option>
<option value=30>month</option>
</select>
</div>
{{ time }}
I'm able to use the above dropdown to this:
<div>
<select class="test-default" id="testTime">
<option value=0 {% if time == 0 %} selected="selected" {% endif %}>today</option>
<option value=7 {% if time == 7 %} selected="selected" {% endif %}>week</option>
<option value=14 {% if time == 14 %} selected="selected" {% endif %}>fortnight</option>
<option value=30 {% if time == 30 %} selected="selected" {% endif %}>month</option>
</select>
</div>
Where {{ time }}
is returned from test.py
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
time = (request.args.get("test"))
return render_template("test.html", time=time)