JavaScriptを使ってselect＆optionの
プルダウンを選択した時にリンクで飛ばす方法

2024.03.08
2023.10.17

最近ちょっと契約の縛りなどで実績としては載せる事ができないのですが、ECサイト制作をやっています。特にMakeshopを使う事が多いのですが、そのECサイト制作、ネットショップ制作でほとんどの制作で使ったのが、今回のこのselectタグで、選択時にリンク先に飛ばすという方法です。

特に最近ではスマホで見られる機会が多いため、横並びリンクなどが続くとどうしてもスマホだと見た目があまり良くないということになってしまうのですが、そんな時にこれを使う事で一気に解決という運びになります。

今回はそんなselectとoptionタグを使ってプルダウンの選択で指定のリンク先に飛ばすという方法を見ていきたいと思います。意外と細かなところで使い勝手が良かったりするので、これを機に覚えておくと良いのではないでしょうか。

この記事の目次

プルダウンでリンクがどういう事かを実例で紹介

いきなり解説といきたいところですが、まずはプルダウン選択でリンク先に遷移とはどういうことか？というのを見ておきましょう。その完成系を見て、改めて解説と実際にどういうシーンで使う事が多いかといったところを書いてまとめたいと思います。

通常のプルダウンメニュー

一般的なプルダウンメニューは、フォームの実装時に使います。
生年月日などのような、年や月、日といった日付の選択に使うシーンなどが多いかなと思います。

いわゆる、↓こういうやつです。（ちょっとCSSで装飾も入れています）

これだと、選択してもただただその項目が選択されただけになります。
今回の解説は、これを次のサンプルのように、選択すると設定したリンク先に飛ぶ、いわば<a href="">の役割をselectとoptionのタグを使って行うということです。

実際のプルダウンでリンクに飛ぶサンプル

では、実際にプルダウンでリンク先に飛ぶサンプルを見ていきましょう。
どのリンク先に飛ぶかは、それぞれの選択項目に記載していますのでご確認ください。

選択するとその瞬間にリンク先に飛ぶのでご注意を。

選択すると、実際にリンクで飛べるのが確認できたかと思います。
URLの書き方としては、絶対パスでも相対パスでもどちらでも問題なく動作しますが、個人的には使うシーンが限られている事や、その使うシーンでこのURLといったようなパターンも多いので、結果的に絶対パスで記載することの方が多い気がします。

プルダウンでリンクに飛ぶコードと解説

ということで、それぞれ実際のコードと解説をしていきたいと思います。

実際のコードについて

まずは実際のコードを見ていきましょう。上記で書いたサンプルと全く同じコードになります。

書き方とか設定などは多々あるかとは思いますが、今回は必要となるコードも非常に短いため、シンプルにHTMLにそのまま記載する方法でやってます。

<form name="formlink">
<select name="selectlink" class="selectlink" onchange="if(document.formlink.selectlink.value){location.href=document.formlink.selectlink.value;}">
<option>選択してください</option>
<option value="リンク先URL">テキスト</option>
<option value="リンク先URL">テキスト</option>
<option value="リンク先URL">テキスト</option>
<option value="リンク先URL">テキスト</option>
</select>
</form>

.selectlink{
  margin: 30px 0px 0px;
  padding: 15px;
  border: 2px #ddd solid;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

.selectlink:hover{
  border: 2px #333 solid;
  background-color: #eee;
}

CSSは全て装飾用のため、実際の動作に必要なものではありません。
見やすくするために、余白やボーダーの設定などを付け加えたものになり、実際に必要なのはHTML側のコードになります。

コードの解説

コードの解説といきたいところですが、今回のケースでは実際に大切になるコードというのは非常に少ないです。

<form name="formlink">
<select name="selectlink" class="selectlink" onchange="if(document.formlink.selectlink.value){location.href=document.formlink.selectlink.value;}">
</select>

ほぼこれに限ります。
もっと言うと、コピペさえしてしまえば済むくらいでもあります。

まずは、formタグにname属性を与えます。
このname属性に与えたものは、後で使うのでわかりやすい名前を付けるようにしておきましょう。
サンプルでは、formlinkという名前にしています。

次に、selectタグにも、name属性を与えます。
これも同じように、次のコードで使うので、わかりやすい名前を付けるようにしておきましょう。
サンプルでは、selectlinkという名前にしています。

最後に、一番大切になってくるJavaScript部分のコードですが、

onchange="if(document.formlink.selectlink.value){
  location.href=document.formlink.selectlink.value;
}"

となっている箇所が、プルダウンでリンクになってくれるためのコードになります。
この時の注意点としては、先ほどのformタグ、およびselectタグに付けたname属性が、それぞれ2箇所出てきていますが、それらを必ず統一するという点です。

それら以外はいわばもうコピペで動くものになっています。
あとは、optionタグのvalue属性に、リンク先のURLを入力すれば完了です。

そのため、実際に使う際は、name属性をform1、select1などの名前を付けて使っているというケースも多いように感じます。

optionタグのvalue属性にURLの入力をしていきますが、これは先ほども記載してましたが、https://から始まる絶対パスの入力でも動作しますし、../ といったような現在地からの相対パスでも動作します。

注意点は同じページに2個載せる事ができない

あまり無いかとは思いますが、注意点はこの通りで、同じページに2つ載せるとname属性が同じものが複数出来てしまうため、正常に動作しなくなってしまいます。

使う際には、1つだけ使う用にしておきましょう。

実際にどんなシーンで使われるのか

プルダウンの選択でリンクにするというシーンですが、経験がない場合、そうはいっても使う機会とかある？と思うかも知れません。自分もかつてはそうでした。しかしながら、これを知ってからは特定のシーンというかケースにおいてはほぼ間違い無く使ってるというケースがあります。

それが、並び替え系のシーンです。
通販の一覧系ページなどで、並び替えをするシーンが多くあります。

こういう並び替え、特に通販ではカテゴリ一覧や検索結果ページなどではよく使われます。

これはこれで問題ないのですが、レスポンシブなどで作りスマホサイズで表示する際、どうしてもリンクが横長になってしまうため、レイアウトが非常にやっかいになってきます。

4個並びならまだ文字を少なくしたり、行間や文字サイズを小さくしたりといった事でギリギリレイアウト内におさめる事も可能だったりするかもしれませんが、そうではなく今回のプルダウンでリンクにする方法を取ることで、横幅の悩みがほぼ解決でき、綺麗に表示することができるようになります。

これを使えば並べ替えという文言を入れてもぐっと横幅が縮まりますし、実際に楽天市場やYahoo!ショッピングなどのショッピングモールでも、並べ替えのリンクは相当数もあるため、リンクの並列ではなく、今回のプルダウンの選択でリンクを飛ばす形式になっている事が多いです。

リンクを別のウィンドウで表示したい場合

今まで解説とサンプルでは、リンクは同じウィンドウのまま開きます。
あまりないケースかもしれませんが、外部リンク的に行い、新しいタブやウィンドウとして開きたい場合は、少し変更する必要があります。

変更するコードは、selectタグのonchangeになり、そこを変更すれば新しいウィンドウで開くことがあできます。

onchange="window.open(document.formlink2.selectlink2.options[document.formlink2.selectlink2.selectedIndex].value, '');"

これをselectタグに付けてやれば、新しいウィンドウで開くことができます。
実際のコードとしては下記のようになります。

<form name="formlink2">
<select name="selectlink2" class="selectlink2" onchange="window.open(document.formlink2.selectlink2.options[document.formlink2.selectlink2.selectedIndex].value, '');">
<option>選択してください</option>
<option value="https://urakata.me/">裏方ワークスのトップ</option>
<option value="https://urakata.me/blog/">裏方ワークスのブログトップ</option>
<option value="https://urakata.me/contact/">裏方ワークスのお問い合わせ</option>
</select>
</form>
<script>
function targetblank(){
  
}
</script>
<style>
.selectlink2{ margin: 30px 0px 0px; padding: 15px; border: 2px #ddd solid; border-radius: 3px; background-color: #fff; cursor: pointer; }
.selectlink2:hover{ border: 2px #333 solid; background-color: #eee; }
</style>

実際のサンプルは下記です。
プルダウンを選択すると、実際に新しいタブ・ウィンドウでリンクが表示されるかと思います。