HTMLのプルダウンメニューをリンクにする方法！
HTMLのプルダウンメニューをリンクにする方法を紹介します。またプルダウンメニューのリンクで別タブで開く方法についても解説します。
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>
上記コードの動作は下記から確認が出来ます。
解説
今回は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>
解説
JavaScriptで新しいタブ・ウィンドウで開くにはwindow.open()を利用します。
今回はonChange属性に下記のようにGoogleの検索ページをwindow.openを使って開くようにしています。
window.open('リンク先URL');
