【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法

どうも7noteです。セレクトボックスで選択された内容ごとにリンク先を変える方法

シンプルなスクリプトで対応が可能です。
検索ボタンを押したときに、リンクする方法と、セレクトの値を変更した瞬間にリンクする方法の2種類のサンプルソースです。

※jQueryを使用しています。jQueryってなんだという方はこちら

「検索」ボタンありバージョン

index.html

<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>
<button class="btn">検索</button>

script.js

$(".btn").on("click",function(){
  const selected = $("select[name=preflist]");
  window.location.href = selected.val();
});

検索ボタンなしバージョン（選択を切り換えたらすぐリンク）

index.html

<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>

script.js

const selected = $("select[name=preflist]");
selected.on("change",function(){
  window.location.href = selected.val();
});

解説

window.location.hrefでリンク先を指定することができます。
タイミングはボタンありの場合はボタンを押した時、ボタンなしならセレクトの値が変更された時に発火するように作ります。
とび先のリンクを各optionタグのvalueに入れておくことで、指定のリンク先へ飛ばすことができます。

参考
https://awesome-linus.com/2019/05/09/select-option-href/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ