Written by Kasumi

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

htmlのselectタグを使いオプションのvalue値にリンク先URLを入れ、選択したらリンク先に遷移する挙動を実装したい。

本記事ではjQueryを使ってこのような悩みを解決します。

※jQueryを使うので事前にライブラリを環境に読み込む必要があります。

実装サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

codepenを使った実装サンプルです。

selectタグ内、任意のoptionを選択すると当ブログのURLにリンクします。

実装手順は以下の通りです。

HTML

<select>
  <option value="">kasumiblogにリンク先を選んでください。</option>
  <option value="https://kasumiblog.org/about/">当ブログについて</option>
  <option value="https://kasumiblog.org/category/web/">Web製作に関する記事一覧</option>
</select>

まず最初にリンク用selectボックスのhtmlを用意します。

optionタグのvalue属性に選択したらリンクさせたいURLを入力します。

jQuery

  $(function () {
  $('select').change(function() {
    if ($(this).val() != '') {
      window.location.href = $(this).val();
    }
  });
});

最後に上記jQueryコードを記述すればOKです。

changeメソッドを使ってselectボックスで値を選択した時という関数を記述。

選択したoptionのvalueに値が入ってたら、window.location.hrefを使ってvalue値に入ってるURLのリンク先に遷移する処理をしています。

以上でselectボックスを使ってリンクさせるコードの実装が完了します。

まとめ

簡易的な質問形式のサイトで、selectタグを使い誘導するページへのリンクを実装したい時に本記事の方法が使えるかもしれません。

以上で解説を終わります。

目次

関連記事

jQuery

【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう

更新日:2022.09.09
2032
jQuery

jQuery UI Datepickerで本日を基準に過去を非選択。選択可能日を設定する方法

2023.10.02
209
jQuery

【簡単datapicker】選択した日付によってイベントをjQueryで追加する方法

更新日:2022.09.09
5668
jQuery

jQueryを使ってdivタグ、pタグ等のテキスト値を取得する方法

更新日:2022.09.09
3519