The canonical way is always server-size rendering. So, the second best options is rendering a part of the page, containing the select (e.g., a form, a tab etc.) and htmx then swaps it into the page content. JSON is not "native" to htmx and hypermedia, so if having a JSON api is a requirement, that you can't avoid, you need https://htmx.org/extensions/client-side-templates/ extension.

This extension provides integration with three popular templating libraries, but you can always copy and paste its code to work with your engine of choice

unfortunately we are migrating from Django backend and as an interim new API will be used for what Django used to pass from within it's context :/

note, that I assumed that this endpoint is external to your site (e.g, an external service or a microservice from a separate team). If you can get this data from a database directly, absolutely do so

so something like this?

<div class="input-group">
                        <select class="form-select form-select-sm" hx-get="https://virtserver.swaggerhub.com/paulo882/TestRunner/1.0.0/device" hx-target="#device_list"
                            nunjucks-template="devices_dropdown">
                            <option selected disabled>Select Device</option>
                            <div id="device_list"></div>
                        </select>
                        <template id="devices_dropdown">
                            {% verbatim %}
                            {% for device in devices %}
                            <option name="device_name" value="{{ device.device_id }}">{{ device.device_id }}</option>
                            {% endfor %}
                            {% endverbatim %}
                        </template>
                    </div>

I would use (or repurpose) the client-side-templates extension for this: https://htmx.org/extensions/client-side-templates/

yes, pretty much this

don't forget to include a link to nunjucks library, as the extension does not include it

also, don't forget to set hx-ext="client-side-templates" to enable the extension

(lol, sorry, early, realize @ripe-action-67367 has this well in hand)

yes i have it defined inside of my container (base.html)

great!

then it should work I think hopefully maybe it worked on my machine

think i need onselect action?

that depends on your workflow

wait

I just realized

hx-trigger="change" ?

you have a div in your select

I'm 99% sure this is not valid

using my logic it would be rendered inside of select (form-select)

nevermind it works

when do you want to load this list?

when i click the select menu

well trigger the dropdown

onclick

I never heard of some separate event for opening the select

hmm doesn't seem to send a request

this is unfortunate

could you share your select tag?