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. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  2. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. jQuery_Overlay_Menu
  5. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP