HTMX hx-trigger two functions - html

Question

I have a selected dropdown list that triggers a function in my Django application.
So I need to execute another function too. is it possible?
this is the HTML code I tried to use hx-trigger with load after 0.5s but is executed once before the user selects the item!
then I moved the function inside the page that it run after the user selects the item. it works but the returned request is duplicated! and I need it to replace the old list?
<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>
And this is my part_Wells.html page
<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 class="col-md-12"
hx-target="#part_MyWellsList"
hx-get="{% url 'LoadWells' %}"
hx-trigger="load"
hx-include="[name='fields']"
hx-swap="afterend">
</div>
and this part_MyWellsList page:
{% 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 %}
with this structure everything in the backend works well just I need the last dropdown list to be replaced with the new one?

Answer 1

I solved it by making these changes.
the main page:
<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>
and also in the second pages as:
<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>