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. Ace Responsive Menu
  2. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  3. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

  4. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  5. no-image
  6. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP