How to render update element (graph) with HTMX if two (2) elements (selector) have new value?

I have an element - dropdown list selector. Which works and there is a choice of value. Based on the value received, I send a request to execute the code and, at the end, to change / render another element (graph).

I added one more element to the template - one more selector list. And also redirected the change route to this element in the template. It also began to change based on the received value in the first selector list.

I'm thinking about how you can change the third element of the template (graph) - based on the values obtained - by the first and second elements (two selector lists). The first selector list - refines filters the model query.

The second selector list - refines, filters the model request more precisely - the values ​​already left in the request after the first selector and already at the end sends the result to display in the form of a graph.

How can you think of changing only the schedule - rebuilding without changing the entire template? Whether it is possible to think up such by means of HTMX?

zamer_tabl_2_htmx.html

<div class="row">
        <div class="col-4">
                <select
                        id="select-name"
                        class="custom-select"
                        name="select"
                        autocomplete="off"
                        hx-get="{% url 'zamer_tabl_2_htmx' %}"
                        hx-target="#figure, #selector_2">
                    {% for select in selector %}
                        <option value="{{ select }}">{{ select }}</option>
                    {% endfor %}
                </select>
                <hr/>
                <div id="selector_2" class="col-8">
                    {% include 'zamer_tabl_2_htmx_select.html' %}
                </div>
        </div>
        <div id="figure" class="col-8">
            {% include 'zamer_tabl_2_htmx_figure.html' %}
        </div>
    </div>

zamer_tabl_2_htmx_select.html

        <select
                id="select-name-2"
                class="custom-select"
                name="select_2"
                autocomplete="off"
                hx-target="#figure">
            {% for select_2 in selector_2 %}
                <option value="{{ select_2 }}">{{ select_2 }}</option>
            {% endfor %}
        </select>

views

def zamer_tabl_2_htmx(request):
///code///
    if request.htmx:
        print("HTMX")
        if request.htmx:
            print("HTMX")
            print(select_kotol)
            return render(request, 'zamer_tabl_2_htmx_select.html', context)
        return render(request, 'zamer_tabl_2_htmx_figure.html', context)

    return render(request, "zamer_tabl_2_htmx.html", context)
Back to Top