You have to pass the selected time in transactions_view() to the template and test each option’s value during the rendering.

First, in test.py you have to modify transactions_view() like this:

@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
    options = (
        (0, 'today'),
        (7, 'week'),
        (14, 'fortnight'),
        (30, 'month'),
    )
    default_time = 0
    selected_time = int(request.args.get('time', default_time))

    return render_template("test.html", options=options, selected_time=selected_time)

Here we have the options variable as a tuple of key-label pairs, and selected_time variable holds the value of the selected time from the GET request or a default value. Both variables have been passed to the render_template function so we can access them in the template file.

And in the test.html template file you have to modify the for loop like this:

<div>
  <select class="test-default" id="testTime">
    {% for time, label in options %}
    <option value="{{ time }}" {% if time == selected_time %}selected="selected"{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
</div>

Here we test each option’s time value whether it is the selected time and set selected attribute accordingly.

in my opinion we should avoid letting our html/rendering logic leak into our routes/controller handlers. therefore, for the example above you should only make changes to your template html. lastly, i believe javascript is a better and more clean implementation rather than using jinja conditionals.

<!--  /templates/time.html -->
{% 
   set time_lookup = { 
        0:  "Today",
        7:  "Week",
        14: "Fortnight",
        30: "Month",
    }
%}
<div>
    <select class="test-default" id="testTime">
        {% for option in options %}
           <option value={{ option }}>{{ time_lookup[option] }}</option>
        {% endfor %}
    </select>
</div>
<script>

const urlParams = new URLSearchParams(window.location.search); 
// current url and parse our query params "?test=201"

const timeParam = urlParams.get("time") || "0";
// default to 0

const option = document.querySelector("select.test-time option[value=" + timeParam + "]") 
// returns <option> HTMLElement where value === timeParam

option.setAttribute("selected", true)
// set <option selected="true"> on HTMLElement

</script>

axios obtains the response with the updated time parameter, however you will need to load the response, which is the updated HTML, to see the updated time.

You can update your fetch_test_data function as shown below to load the HTML response when the drop-down value changes.

function fetch_test_data(){
    let test = $("#testTime").val();
    axios({ 
        method:"get",
        url:"/test",
        params: {
            test
        }
    }).then(function (response) {
        $(document.body).html(response.data)
    }); 
}

If using axios is not a requirement for you and you simply want to update the time, the following code will do just that without sending a request.

<span id=timelabel>Default Time</span>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    var label = document.getElementById('timelabel');
    var dropdown = document.getElementById('testTime');

    $("#testTime").on("change",function (evt) {
        label.textContent = dropdown.value;
    })
</script>

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)