Writing this down as I wrote this code but then removed from my project and want to keep a reference.

I had a kind of peculiar use case with a <select> HTML element that contained some options.

If user selected one option, I wanted to perform a network request so I came up with this idea, listening on the change event on the select (the only way to know which option was selected is to set a value on the option).

Using Alpine.js in the example code as I used that in the project and don’t want to rewrite in vanilla JS but it’s not needed.

I dispatched a custom event on the body, and using htmx I used this event to trigger the GET request with hx-trigger="myevent from:body":

<select
	x-on:change={`
	  if (event.target.value === 'myoption') {
	    document.querySelector('body').dispatchEvent(
        new Event('myevent')
      )
	  }
	`}
>
	<option>...</option>
	<option>...</option>
	<option>...</option>
	<option
	  value="myoption"
	  hx-get=`/some-url`
	  hx-trigger="myevent from:body"
	  hx-target="#target">
	  Select this option
	</option>
</select>

Lessons in this unit:

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	Doing a GET request
5:	Swap
6:	POST request
7:	Targets
8:	Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	htmx, include hidden input fields outside of a form
20:	▶︎ htmx trigger request via JS event