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>

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

WordPressのログイン時のツールバーWordPressで最新記事の一覧をプラグインを使わないで表示させるやり方前のページ

人の「手」を使ったクリエイティブなロゴデザイン35次のページSecure Homes

関連記事

  1. Responsive Sidebar Navigation
  2. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  3. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  4. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  5. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  6. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP