HTMX hx-триггер две функции

У меня есть выбранный выпадающий список, который запускает функцию в моем приложении Django.

Так что мне нужно выполнить и другую функцию. возможно ли это?

это HTML код, я пытался использовать hx-триггер с загрузкой через 0.5s, но он выполняется один раз, прежде чем пользователь выберет элемент!

Затем я переместил функцию внутрь страницы, чтобы она выполнялась после того, как пользователь выберет элемент. Это работает, но возвращаемый запрос показывается в неправильном месте! А мне нужно, чтобы он находился внизу страницы?

        <div class="col-md-3">
            <select class="custom-select mb-4" name="fields" hx-get="{% url 'select_field' %}" hx-trigger="change" hx-target="#Wells" hx-include="[name='Toggle']">
                <option selected>Select a field</option>
                {% for Field in TFTFields %}
                <option ue="{{Field.Perimeter}}">{{Field.Perimeter}}</option>
                {% endfor %}
            </select>
        </div>

    <div class="row">
        <div class="col-md-12" >
            <div id="Wells">
                {% include 'Home/Data_visa/part_Wells.html' %}
            </div>
        </div>
    </div>
<div class="col-md-12" >
    <div id="part_MyWellsList">
        {% include 'Home/Data_visa/part_MyWellsList.html' %}
</div>
    </div>

И этот мой part_Wells.html как

    <div class="col-md-3" >
    <select class="custom-select mb-4" name="Wells" hx-get="{% url 'addplotly' %}" hx-trigger="change" hx-target="#plotly_production" hx-include="[name='Toggle']">
        <option selected>Select Well</option>
        {% for well in TFTWells %}
        <option value="{{well.WellID}}">{{well.WellID}}</option>
        {% endfor %}
    </select>
</div>

<div id="part_MyWellsList" class="d-inline-flex" 
hx-get="{% url 'LoadWells' %}" 
hx-trigger="load delay:0.5s"
hx-include="[name='fields']">
</div>

и эта part_MyWellsList страница:

{% if FieldWells %}
<div class="row">
    <div class="col-md-3" >
    <select class="custom-select mb-4" name="Wells1" hx-get="{% url 'addplotly' %}" hx-trigger="change" hx-target="#plotly_production" hx-include="[name='Toggle']">
        <option selected>Select Well</option>
        {% for well in FieldWells %}
        <option value="{{well.WellID}}">{{well.WellID}}</option>
        {% endfor %}
    </select>
    </div>
</div>
{% endif %}

с этой структурой все в бэкенде работает хорошо только мне нужно чтобы последний выпадающий список был внизу страницы?

enter image description here

Я решил эту проблему, сделав следующие изменения. главная страница:

        <div class="col-md-3">
            <select class="custom-select mb-4" name="fields" hx-get="{% url 'select_field' %}" hx-trigger="change" hx-target="#Wells" hx-include="[name='Toggle']">
                <option selected>Select a field</option>
                {% for Field in TFTFields %}
                <option ue="{{Field.Perimeter}}">{{Field.Perimeter}}</option>
                {% endfor %}
            </select>
        </div>

    <div class="row">
        <div class="col-md-12" >
            <div id="Wells">
                {% include 'Home/Data_visa/part_Wells.html' %}
            </div>
        </div>
    </div>
<div class="col-md-12" >
    <div id="part_MyWellsList">
    </div>
</div>

а также на вторых страницах как:

<div class="col-md-12"
hx-target="#part_MyWellsList"
hx-get="{% url 'LoadWells' %}" 
hx-trigger="load"
hx-include="[name='fields']"
hx-swap="innerHTML">
{% include 'Home/Data_visa/part_MyWellsList.html' %} 
</div>
Вернуться на верх