LoginSignup
47
46

More than 5 years have passed since last update.

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

Posted at

方法

optionタグのvalue属性にURLを指定して、その値をlocation.hrefにセットする。

html

optionのvalueにジャンプさせたいURLを指定する。
onchange()は内容が変化したら発生するイベント。

index.html
<form name="sort_form">
    <select name="sort" onchange="dropsort()">
        <option value=""> --- 選択してください --- </option>
        <option value="">Google</option>
        <option value="">Yahoo</option>
        <option value="">msn</option>
    </select>
</form>

Javascript

Javascriptで行き先をリンク化する

sort.js
function dropsort() {
    var browser = document.sort_form.sort.value;
    location.href = browser
}

これで上手くいきます。
dropdownで選んでからボタンを押してsubmitとかをしたくないときに便利です。

参考サイト

JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

47
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
46