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タグを使い誘導するページへのリンクを実装したい時に本記事の方法が使えるかもしれません。

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

Ads

関連記事

WordPress プログラミング

wordpressのパーマリンクに拡張子(.html等)を付けれるよう変更したい

2020.07.17
24
HTMLCSS プログラミング

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

2021.03.02
355
JavaScript プログラミング

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

2021.06.08
85
JavaScript プログラミング

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

更新日:2021.01.02
357