htmx-select

A htmx extension for HTML select element events.

https://github.com/bkuhlmann/htmx-select

Keywords

Repository

A htmx extension for HTML select element events.

README.adoc

:toc: macro
:toclevels: 5
:figure-caption!:

:htmx_link: link:https://htmx.org[htmx]

= htmx Select

This library is a {htmx_link} link:https://htmx.org/extensions[extension] that can be used for situations where you need to make a HTTP GET request via a HTML select option's value upon a change and/or blur event. By default, most browsers don't support this functionality (except Firefox) so, by using this extention, you can enhance the select element to load/render dynamic content for a better user experience.

toc::[]

== Features

* Enhances HTML select elements to make HTTP GET requests based on option values.

== Screencasts

video::https://alchemists.io/videos/projects/htmx-select/demo.mp4[poster=https://alchemists.io/images/projects/htmx-select/demo.png,width=790,height=508,role=focal_point]

== Requirements

. {htmx_link}.
. link:https://nodejs.org[Node] (optional, for development).
. link:https://www.ruby-lang.org[Ruby] (optional, for development).

== Setup

The following _assumes_ you are already using {htmx_link} and have it configured in the same manner as documented in this setup section.

To use via the HTML `script` element, add the following to your layout:

[source,html]
----

----

To use via Import Maps, add the following to your layout:

[source,html]
----



----

To install via link:https://www.npmjs.com[NPM], run:

[source,bash]
----
npm install htmx-select
----

Once the library is installed, you only need to import it:

[source,js]
----
import "htmx-select";
----

== Usage

To use, implement a select element with option values that provide URLs to templates or partials. Example:

[source,html]
----


  Version:

  

    Select...
    0.0.0
    0.0.1
  




  Version 0.0.0
  ⬅️




  Version 0.0.0
  ⬅️

----

When selecting a specific version (i.e. 0.0.0 or 0.0.1), this extension will make a HTTP GET request based on the `value` of the option selected. This is made possible via both the `hx-get` and `hx-ext` attributes and ensuring each option element has a URI value. That's it!

💡 The `hx-get` attribute should be an empty string. If a string is provided, it'll be overwritten by the value of the selected option.

== Development

To contribute, run:

[source,bash]
----
git clone https://github.com/bkuhlmann/htmx-select
cd htmx-select
bin/setup
----

To build, run:

[source,bash]
----
bin/build
----

To view interactive demonstration, run

[source,bash]
----
# With default port.
bin/demo

# With custom port.
bin/demo 9050
----

== Tests

To test, run:

[source,bash]
----
bin/rake
----

== Deployment

To deploy, follow these steps:

. Ensure link:https://alchemists.io/projects/milestoner[Milestoner] is installed.
. Ensure you are on the `main` branch.
. Run the following:

[source,bash]
----
bin/build
npm publish
milestoner --publish
----

== link:https://alchemists.io/policies/license[License]

== link:https://alchemists.io/policies/security[Security]

== link:https://alchemists.io/policies/code_of_conduct[Code of Conduct]

== link:https://alchemists.io/policies/contributions[Contributions]

== link:https://alchemists.io/policies/developer_certificate_of_origin[Developer Certificate of Origin]

== link:https://alchemists.io/projects/htmx-select/versions[Versions]

== link:https://alchemists.io/community[Community]

== Credits

* Built with link:https://alchemists.io/projects/rubysmith[Rubysmith].
* Engineered by link:https://alchemists.io/team/brooke_kuhlmann[Brooke Kuhlmann].

Owner

Citation (CITATION.cff)

cff-version: 1.2.0
message: Please use the following metadata when citing this project in your work.
title: htmx Select
abstract: A htmx extension for HTML select element events.
version: 0.6.0
license: Hippocratic-2.1
date-released: 2025-08-01
authors:
  - family-names: Kuhlmann
    given-names: Brooke
    affiliation: Alchemists
    orcid: https://orcid.org/0000-0002-5810-6268
keywords:
 - htmx
 - extension
 - element
 - select
repository-code: https://github.com/bkuhlmann/htmx-select
repository-artifact: https://rubygems.org/gems/htmx-select
url: https://alchemists.io/projects/htmx-select

GitHub Events

Packages