セレクトボックス選択でページ遷移

解説

プルダウンで項目を選ぶと、その値の URL へページ遷移する簡易ナビです。select の change を監視し、選ばれた option の value に入れた遷移先 URL を取り出します。デモでは安全のため遷移先を画面に表示するだけにしてあり、本番ではコメントにある window.location.href への代入を有効にすると実際にジャンプします。空の初期オプションを先頭に置き、未選択時は遷移しないよう値の有無を判定しているのが要点です。各オプション内のアイコンはインライン SVG で入れてあり、外部フォントに依存しません。

向く場面とカスタマイズ

カテゴリ切替、サイト内の他ページへの簡易移動、フォーム不要の絞り込みナビなどに向きます。サーバー送信もページ全体のリロード設計も要らず、少ないコードで設置できます。項目を増やすときは option を追加し、表示名と遷移先 URL を指定するだけです。注意点として、JavaScript が無効な環境では動かないため、検索エンジンや確実な遷移が必要な導線は通常のリンク a を併用するのが安全です。同一タブで開くか別タブにするかは遷移処理の書き方で切り替えられます。