• jQuery

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

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