In HTMX, how do I request a specific URL for each option within a select form element?

user_146764 0
Viewed 884

I'm using HTMX and would like to have a <select> form field that automatically loads a specific URL into a <div>.

The "value select" example is similar to this idea, but it includes the value as a query parameter such as /models?make=audi. I would like to use a specific URL for each <option> instead.

This is an approximation of what I would think should work.

<select name="make" hx-target="#models">
  <option hx-get="/models/audi">Audi</option>
  <option hx-get="/models/toyota">Toyota</option>
  <option hx-get="/models/bmw">BMW</option>
</select>

<div id="models">
  <!-- hx-get results would go here -->
</div>

However, this does not work and I'm unable to find a way to implement what I describe. How can I achieve the desired behavior?

Edit: Related Twitter thread

htmx html-select html
2 Answers

I had a conversation on Twitter and came to the conclusion that this does not yet exist.

I ended up playing with htmx:configRequest, resulting in this reusable JavaScript, which may make sense to contribute back to the HTMX library.

    document.body.addEventListener("htmx:configRequest", function (event) {
      let pathWithParameters = event.detail.path.replace(/:([A-Za-z0-9_]+)/g, function (_match, parameterName) {
        let parameterValue = event.detail.parameters[parameterName]
        delete event.detail.parameters[parameterName]

        return parameterValue
      })

      event.detail.path = pathWithParameters
    })

This is an example of how it is used:

    <select name="make" hx-get="/models/:make" hx-target="#models">
      <option name="audi">Audi</option>
      <option name="toyota">Toyota</option>
      <option name="bmw">BMW</option>
    </select>
user_1467640
user_1759620
Related