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. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  2. curtains.js

    JavaScript

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

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

  3. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  4. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  5. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  6. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP