Multiple select tags, on change, pass all values

[jritsema]

Hi. I have multiple <select> tags used as filters. When the user changes any of them, I would like HTMX to issue an AJAX GET request sending all <select> values as query string parameters (or I suppose POST values should work too). Is this possible with HTMX?

[Telroshan]

Hello, check out this JSFiddle for an example implementation.

<select name="filter1">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="filter2">
  <option value="A">A</option>
  <option value="B">B</option>
</select>


<div hx-get="/url" hx-include="select" hx-trigger="change from:select">
 Content will be swapped here
</div>

• Use hx-get to issue GET requests. Similarly, use hx-post to issue a POST request instead
• Use hx-include when you can't use a form or need to include elements that are elsewhere in the DOM hierarchy, to include the required values
• Use hx-trigger to specify when the request should be sent. Here, I used the standard change event, along with the from:selector specifier for hx-trigger that htmx provides (cf doc)

Please note that there are several ways of accomplishing the same result, depending on your situation, your constraints, and your preferences

• You could use a form to wrap the selects, define hx-get on it, and skip the hx-include attribute (as values inside a form are automatically included along)
• You could set hx-get on every select element and set hx-trigger to hx-trigger="change" instead of using the from syntax
• Very likely other ways that I just can't think of from the top of my head as I'm writing this

Hope this helps!

[jritsema]

Thank you @Telroshan! The "change from:select" was what I was missing. Didn't realize you could combine them :)