HTMLのプルダウンメニューをリンクにする方法!

HTMLのプルダウンメニューをリンクにする方法を紹介します。またプルダウンメニューのリンクで別タブで開く方法についても解説します。

コンテンツ [表示]

  1. 1HTMLのプルダウンメニューをリンクにしたい
  2. 2HTMLのプルダウンメニューをリンクにする方法
  3. 2.1解説
  4. 3プルダウンメニューのリンクを別タブで開く方法
  5. 3.1解説

HTMLのプルダウンメニューをリンクにしたい

HTMLでプルダウンメニューはformタグとセットで使われるselectタグとその選択肢を表すoptionタグを使う事で表示することが出来ます。

下記の例ではシンプルに西暦の年数をプルダウンメニュー(セレクトボックス)で表示させています。
※CSSで若干見やすいようにしています。

さて、このプルダウンメニューですが選択しただけでは、リンクの様にページが切り替わる事はありません。

一方でプルダウンメニューで選択されたらリンクの様にページを切り替えたいといった場合もあります。

ここではプルダウンメニューの選択でリンクのようにページを切り替える方法を紹介します。

HTMLのプルダウンメニューをリンクにする方法

selectタグとoptionタグから成るプルダウンメニューをリンクにするにはJavaScriptを使う必要があります。

下記のようにすることでJavaScriptを使ってプルダウンメニューをリンクのようにページの切り替えを行えます。今回はoptionタグで指定されたvalueを使ってGoogleの検索ページにリンクするようにしています。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プルダウンメニュー</title>
  <style>
    select {
      width: 100%;
      height: 40px;
    }
  </style>
</head>
<body>
  <form action="">
    <select id="year" name="year" onChange="location.href='https://google.com?q='+value;">
      <option value="2019">2019年</option>
      <option value="2020">2020年</option>
      <option value="2021">2021年</option>
    </select>
  </form>
</body>
</html>

上記コードの動作は下記から確認が出来ます。

【動作確認用】プレビューのURL
こちらから動作を確認出来ます。

解説

今回はselectタグのonChange属性を利用しています。onChange属性はinputタグのチェックボックス、ファイル、テキストボックス、そしてセレクトボックスで利用可能な属性で値が変わった際に任意のスクリプトを実行させることが出来ます。

今回は下記のようにJavaScriptのlocation.hrefつまり現在のページのURLをこちらが指定したURL(リンク先)に変更しています。

location.href = "リンク先URL";

プルダウンメニューのリンクを別タブで開く方法

さて、このプルダウンメニューのリンクですが、別タブで開く方法はないのでしょうか?

onChange属性にスクリプトを書くことが出来ますので、JavaScrptで別タブで開くように変更してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プルダウンメニュー</title>
  <style>
    select {
      width: 100%;
      height: 40px;
    }
  </style>
</head>
<body>
  <form action="">
    <select id="year" name="year" onChange="window.open('https://google.com?q='+value);">
      <option value="2019">2019年</option>
      <option value="2020">2020年</option>
      <option value="2021">2021年</option>
    </select>
  </form>
</body>
</html>
【動作確認用】プレビューのURL
こちらから動作を確認出来ます。

解説

JavaScriptで新しいタブ・ウィンドウで開くにはwindow.open()を利用します。

今回はonChange属性に下記のようにGoogleの検索ページをwindow.openを使って開くようにしています。

window.open('リンク先URL');

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次