Сохранение текущего выбранного параметра из маркера <select>, переданного из Django

В настоящее время я пытаюсь создать веб-сайт / веб-приложение для банка моего портфолио, используя Django 5.2/HTML/CSS/JS. Я застрял на одной небольшой части создания подстраницы банковских выписок. Проблема, с которой я столкнулся, заключается в следующем: когда пользователь устанавливает, как он хочет, чтобы его оператор был упорядочен, параметр обоих тегов select возвращается к состоянию по умолчанию.

Пожалуйста, имейте в виду, что в настоящее время я сосредоточен на изучении Django в рамках моего плана изучения Python, и я практически новичок в JS. Однако я многое понимаю, так как изучил основы Python (я сдал PCEP и PCAP), и, кроме семантических изменений, большинство правил в ООП, похоже, схожи.

Вот мой текущий код из 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 %}

Я не добавляю свой views.py код, в котором я проверил, передаются ли контекстные переменные, добавив тег p и отобразив их оба в этой части:

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

Я попробовал несколько решений: 1.Первое было таким же, как указано выше, но без изменения значения selected на True , а просто оставив значение .selected, чтобы, возможно, добавить этот атрибут к соответствующему <option> 2.In во втором случае я попытался изменить .value параметра <select> по идентификатору, и это выглядело так:

<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>

Я попробовал несколько других решений, в основном изменив "on event"(onload, onselect, onchange and even onclick) и поместив его в разные теги моей подстраницы.

Позвольте мне просто добавить, что:

  1. Функция "упорядочивание по" идеально подходит для обоих вариантов выбора.
  2. В нижней части этого сайта есть два поля типа даты, которые позволяют вам указать диапазон дат для вашего заявления, и они также отлично работают.
  3. Поля типа даты получают свои значения по умолчанию из контекстных переменных, которые передаются из views.py и они сохраняют выбранную дату, поскольку я передаю выбранные даты в качестве контекстных переменных в атрибут value.
<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 }}">

Значения {{ order }} и {{ order2 }} НА 100% соответствуют одному из параметров тега select .

У кого-нибудь есть идеи, как решить эту проблему? Кроме того, я впервые размещаю сообщение на этом сайте, поэтому приношу извинения, если я сделал что-то не так.

/// РЕДАКТИРОВАТЬ

Я попробовал решение от C3roe, и оно сработало с небольшим изменением: вместо .selected=True я сделал .selected='True'. Я пробовал этот вариант раньше, но не использовал одинарные кавычки(') для .selected='True'. Тем не менее, решение C3roe сработало, и спасибо вам за это.

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