JavaScript

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

ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだけでその項目に指定してあるURLにジャンプさせるやり方です。optionタグのvalue属性にURLを指定しておき、その値をlocation.hrefにセットするだけでできるので簡単ですね。ということで以下やり方です。

[ads_center]

やり方

まずはHTMLです。optionのvalueにジャンプさせたいURLを指定しておきます。onchageは内容が変化したら発生するイベントです。

<form name="fm">
    <select name="s" onchange="sample()">
        <option value="">---ブラウザを選択---</option>
        <option value="https://www.google.co.jp/">Google</option>
        <option value="http://www.yahoo.co.jp/">Yahoo</option>
        <option value="http://www.bing.com/?cc=jp">Bing</option>
    </select>
</form>

JavaScriptはこんな感じです。

<script type="text/javascript">
function sample() {
    var browser = document.fm.s.value;
    location.href = browser;
}
</script>

使う機会はあまりないかもですが、小スペースですむのでスペースを有効活用したいって時にはいいかもしれないっすね。

関連記事

  1. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  4. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  5. Parallax Slider with jQuery
  6. no-image

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP