web関連

【javascript】セレクトボックスで選択したらリンク先に移動するやつ

2019/10/31

2019/11/02

【javascript】セレクトボックスで選択したらリンク先に移動するやつ

セレクトボックスでメニューを作ったときの備忘録

参考

HTML : セレクトボックスの項目を選択するだけでリンク先へ移動

セレクトボックスから項目を選択するだけでリンク先にジャンプさせる方法

まんま参考サイト通りで行けたので紹介

 

セレクトボックスで選んだ値のリンク先に移動するコード

<form name="sort_form">
    <select name="sort" onchange="dropsort()">
        <option value="">お選び下さい</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.co.jp">Yahoo</option>
    </select>
</form>

<script>
function dropsort() {
    var browser = document.sort_form.sort.value;
    location.href = browser
}
</script>

onchange…値が変更されたら発火するみたい

document.sort_form.sort.value;ってなんだろうって思ったらclassだった…

location.href = browser
URLを代入することでlocation.hrefの中身が書き換えられるからすぐに遷移の処理が実行されるみたい
location.hrefは現在のURLを調べるコード

JavaScriptでURLを取得するには?locationの使い方を徹底解説