htmxを使ったセレクトボックスの連動 – 動的に選択肢を切り替える方法

セレクトボックスは、予め定義された選択肢の中からユーザーに値を選択してもらうためのUIコンポーネントです。
しかし、選択肢が膨大な場合や、他の選択肢に応じて動的に変化させる必要がある場合があります。
そのような場合、従来のHTML+JavaScriptでの実装は複雑になりがちです。

htmxを使えば、シンプルなHTMLの属性だけで連動するセレクトボックスを実現できます。
この記事では、htmxを使ってセレクトボックスの選択肢を動的に切り替える方法を詳しく解説します。

本記事の内容

連動するセレクトボックスのHTML構造
選択肢の動的生成
サーバーサイドの処理
サンプルコード
まとめ

それでは、上記に沿って解説していきます。

連動するセレクトボックスのHTML構造

htmxについてよくわからない場合は、次の記事からご覧ください。

まず、連動するセレクトボックスのHTML構造を定義します。
メインのセレクトボックスと、その値に応じて動的に生成されるセレクトボックスを以下のように配置します。

<select name="value" hx-get="fetch_data.php" hx-target="#dynamic-select" hx-trigger="change">
    <option value="">選択してください</option>
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
</select>

<!-- 動的に生成されるセレクトボックスを表示する部分 -->
<div id="dynamic-select"></div>

メインのセレクトボックスには、hx-get、hx-target、hx-triggerの属性を設定します。
これにより、選択肢が変更された際に、指定したPHPファイルからコンテンツを取得し、#dynamic-select要素に挿入するようになります。

選択肢の動的生成

次に、PHPを使って動的にセレクトボックスの選択肢を生成します。
fetch_data.phpというPHPファイルを作成し、以下のようなコードを記述します。

<?php
// fetch_data.php

$option = isset($_GET['value']) ? $_GET['value'] : '';

$result = '';
switch ($option) {
    case '1':
        $result = '<select><option>1-1</option><option>1-2</option></select>';
        break;
    case '2':
        $result = '<select><option>2-1</option><option>2-2</option></select>';
        break;
    case '3':
        $result = '<select><option>3-1</option><option>3-2</option></select>';
        break;
    default:
        $result = '選択肢に応じたセレクトボックスを表示します。';
        break;
}

echo $result;

このPHPファイルでは、GETパラメータの値に応じて動的にセレクトボックスのHTMLを生成しています。
メインのセレクトボックスで選択された値に基づいて、対応する選択肢を持つセレクトボックスを生成します。

htmxは、このPHPファイルをAjaxで取得し、#dynamic-select要素に挿入します。
これにより、メインのセレクトボックスの選択に応じて、連動するセレクトボックスが動的に切り替わります。

サーバーサイドの処理

fetch_data.phpでは、GETパラメータの値に応じて、適切なHTMLを生成しています。

$option = isset($_GET['value']) ? $_GET['value'] : '';

この部分で、GETパラメータ’value’の値を取得しています。
値が存在しない場合は空文字列になります。

switch文を使って、$optionの値に応じて処理を分岐させています。
実際は、DBから取得した値をセットするなどの処理を記述することになるでしょう。

$result = '';
switch ($option) {
    case '1':
        $result = '<select><option>1-1</option><option>1-2</option></select>';
        break;
    case '2':
        $result = '<select><option>2-1</option><option>2-2</option></select>';
        break;
    case '3':
        $result = '<select><option>3-1</option><option>3-2</option></select>';
        break;
    default:
        $result = '選択肢に応じたセレクトボックスを表示します。';
        break;
}

$optionの値が’1’、’2’、’3’の場合、それぞれ対応するHTMLを$resultに代入しています。
それ以外の場合は、デフォルトのメッセージを代入します。

最後に、$resultの値をechoすることで、動的に生成したHTMLをレスポンスとして返します。

echo $result;

htmxは、このレスポンスを受け取り、#dynamic-select要素に挿入します。

サンプルコード

以上の内容を組み合わせた完全なサンプルコードは以下の通りです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Select Example</title>
    <!-- htmxライブラリの読み込み -->
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>

<select name="value" hx-get="fetch_data.php" hx-target="#dynamic-select" hx-trigger="change">
    <option value="">選択してください</option>
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
</select>

<!-- 動的に生成されるセレクトボックスを表示する部分 -->
<div id="dynamic-select"></div>

</body>
</html>

fetch_data.php

<?php
// fetch_data.php

$option = isset($_GET['value']) ? $_GET['value'] : '';

$result = '';
switch ($option) {
    case '1':
        $result = '<select><option>1-1</option><option>1-2</option></select>';
        break;
    case '2':
        $result = '<select><option>2-1</option><option>2-2</option></select>';
        break;
    case '3':
        $result = '<select><option>3-1</option><option>3-2</option></select>';
        break;
    default:
        $result = '選択肢に応じたセレクトボックスを表示します。';
        break;
}

echo $result;

このコードを実行すると、シンプルで高速な連動セレクトボックスが実現されます。
メインのセレクトボックスで選択肢を変更すると、それに応じて動的に生成されたセレクトボックスが表示されます。