htmx Select

2.1.1

This library is a htmx 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. 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.

Table of Contents

Features
Screencasts
Requirements
Setup
Usage
Development
Tests
Deployment
License
Security
Code of Conduct
Contributions
Developer Certificate of Origin
Versions
Community
Credits

Features

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

Screencasts

Requirements

htmx.
Node (optional, for development).
Ruby (optional, for development).
entr (optional, for development).

Setup

The following assumes you are already using htmx 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:

<script src="https://unpkg.com/htmx-select@latest"
        integrity="sha384-+QeEZZpkDxiJ1jsLhYyJq2w2jr7ojtUO0KJlc5mofMDw/GsMSEgmI6XGvTP2VMkC"
        crossorigin="anonymous">
</script>

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

<script type="importmap">
  {
    "imports": {
      "htmx-select": "https://unpkg.com/htmx-select@latest"
    }
  }
</script>

<script type="module">
  import "htmx-select";
</script>

To install via NPM, run:

npm install htmx-select

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

import "htmx-select";

Usage

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

<!-- index.html -->
<main class="body">
  <label for="version">Version:</label>

  <select id="version"
          name="version"
          class="versions"
          data-hx-get=""
          data-hx-trigger="change"
          data-hx-target=".body">

    <option class="option">Select...</option>
    <option value="_0.0.0.html" class="option">0.0.0</option>
    <option value="_0.0.1.html" class="option">0.0.1</option>
  </select>
</main>

<!-- _0.0.0.html -->
<p class="version">
  Version 0.0.0
  <a href="/">⬅️</a>
</p>

<!-- _0.0.1.html -->
<p class="version">
  Version 0.0.1
  <a href="/">⬅️</a>
</p>

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 the data-hx-get attribute and ensuring each option element has a URI value. That’s it!

⚠️ The data-hx-get (or 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:

git clone https://github.com/bkuhlmann/htmx-select
cd htmx-select
bin/setup

To build, run:

bin/build

To view the interactive demonstration, run:

bin/demo
open http://localhost:3030

Any changes to source code will automatically rebuild and reload the demonstration.

Tests

To test, run:

bin/rake

Deployment

To deploy, follow these steps:

Ensure you are on the main branch.
Ensure you’ve updated the CITATION.cff and package.json with new version and committed the changes.
Run the following:

bin/build
bin/publish

Credits

Built with Rubysmith.
Engineered by Brooke Kuhlmann.