Keeping the current chosen option from <select> marker passed from Django

I'm currently trying to create a website/webapp for my portfolio's bank using Django 5.2/HTML/CSS/JS. I got stuck on one small part of creating bank statement subpage. The issue I have encountered is: When user is setting how he wants his statement to be ordered the option of both select tags is reverting back to it's default state.

Please keep in mind I'm currently focusing on learning Django as part of my Python learning plan and I'm practically a noob in JS. I do however understand a lot since I've done basics of Python(I passed PCEP and PCAP) and apart from semanthic changes most of the rules seems to be similar in OOP.

Here is my current code from statement.html:

{% extends "bank_accounts.html" %}
{% block title %} Statement {% endblock %}
<script type="text/javascript">

function change_order(o, o2) {
    document.getElementById(o).selected=True;
    document.getElementById(o2).selected=True;
}
</script>
{% block main %}
<p>{{ order }} {{ order2 }}</p>
<h1>STATEMENT</h1>
<h3> Below you can see statement from current month for your account({{ acc }}):</h3>
<form method="POST" onload="change_order('{{ order }}', '{{ order2 }}');">{% csrf_token %}Sort by:
<select name="order-by" id="order-by">
    <option id="date" value="date">Date</option>
    <option id="from" value="from">From</option>
    <option id="to" value="to">To</option>
    <option id="type" value="type">Type</option>
    <option id="sum" value="sum">Sum</option>

</select>

<select name="order-by2" id="order-by2">

    <option id="asc" value="asc">Ascending</option>
    <option id="desc" value="desc">Descending</option>

</select>
<table id="state-tb">
<tr>
    <th class="state-t"> Date and time </th>
    <th class="state-t"> From </th>
    <th class="state-t"> To </th>
    <th class="state-t"> Type </th>
    <th class="state-t"> Sum </th>
    <th class="state-t"> Reference </th>
    <th class="state-t"> Saldo after transaction </th>
</tr>

{% for x in history %}
    {% if x.type == "IN" %}
    <tr class="in">
    <td class="state-t">{{ x.date|date:"d/m/Y" }} {{ x.date|time:"h:i:s A" }}</td>
    <td class="state-t">{{ x.sender }}</td>
    <td class="state-t">{{ x.recipient }}</td>
    <td class="state-t">{{ x.t`your text`ype }} </td>
    <td class="state-t">{{ x.amount }}</td>
    <td class="state-t">{{ x.trans_ref }}</td>
    <td class="state-t">{{ x.after_saldo }}</td>
    </tr>
    {% else %}
    <tr class="out">
    <td class="state-t">{{ x.date|date:"d/m/Y" }} {{ x.date|time:"h:i:s A" }}</td>
    <td class="state-t">{{ x.sender }}</td>
    <td class="state-t">{{ x.recipient }}</td>
    <td class="state-t">{{ x.type }} </td>
    <td class="state-t">{{ x.amount }}</td>
    <td class="state-t">{{ x.trans_ref }}</td>
    <td class="state-t">{{ x.after_saldo }}</td>
    </tr>


    {% endif %}
{% endfor %}

</table>

    <h4>Below you can specify dates for your statement</h4>
    <input type="date" name="date_min" value="{{ date_val1 }}" min="{{ min_date }}">
    <input type="date" name="date_max" value="{{ date_val2 }}" max="{{ max_date }}">
    <button type="submit">Apply</button>

</form>
</div>

{% endblock %}

I'm not adding my views.py code as I checked wether context variables are passed by adding a p tag and displaying both of them in this part :

{% block main %}
<p>{{ order }} {{ order2 }}</p>
<h1>STATEMENT</h1>

I've tried a couple solutions: 1.First one was the same as above but without changing selected to True but just leaving it at .selected to maybe add that attribute to the proper <option> 2.In the second one I tried to change the .value of the <select> option by id and it looked like this:

<form method="POST">{% csrf_token %}Sort by:
<select name="order-by" id="order-by" onload="get.ElementById('order-by').value='{{ order }}';">

    <option id="date" value="date">Date</option>
    <option id="from" value="from">From</option>
    <option id="to" value="to">To</option>
    <option id="type" value="type">Type</option>
    <option id="sum" value="sum">Sum</option>

</select>

<select name="order-by2" id="order-by2" onload="get.ElementById('order-by').value='{{ order2 }}';">

    <option id="asc" value="asc">Ascending</option>
    <option id="desc" value="desc">Descending</option>

   </select>

I've tried few other solutions, mostly changing the "on event"(onload, onselect, onchange and even onclick) and placing it in different tags of my subpage.

Let me just add that:

1. The "ordering-by" feature works perfectly for both selects.
2. There are two date-type fields on the bottom of this site that let you specify the daterange for your statement and they work perfectly as well.
3. The date-type fields get their default value from context variables that are passed from views.py and they retain the chosen date as I pass chosen dates as context variables to the value Attribute.

<h4>Below you can specify dates for your statement</h4>
    <input type="date" name="date_min" value="{{ date_val1 }}" min="{{ min_date }}">
    <input type="date" name="date_max" value="{{ date_val2 }}" max="{{ max_date }}">

Values of {{ order }} and {{ order2 }} ARE 100% within one of the options from the select tag.

Does anyone have any idea how to resolve this? Also This is my first time posting on this site so apologies if I have done something wrong.

///EDIT

I've tried the solution from C3roe and It worked with a slight change: instead of .selected=True I've done .selected='True'. I've tried this option before but I didn't use single quotation marks(') for .selected='True'. Nonetheless C3roe's solution worked and thank you for that.

Вернуться на верх