Help us understand the problem. What is going on with this article?

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

どうも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のちょいテク詰め合わせ

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away