KAKIMASSE

ネットで見つけた面白い記事や、役立つのではと感じたネタなどを書いています。

JavaScript:プルダウンを選択したらリンク先へ飛ばす方法

      2011/01/12

よくフォームのプルダウンのどれかを選択しただけで
決められたURLへアクセスするものを見かけますが
今回はそれを作ってみようってことで調べたら意外と方法が見つかりにくかったのでメモ。

そもそもJavaScriptについては明るくない方だったのもありどういうキーワードで
ググったら良いかも分からずなかなか思い通りの結果がHITしませんでした。

で、やっと見つけたのがココ
インフォシーク ホームページ作成 プルダウンメニューでリンク集を作成する

順を追って説明してくれていて非常に分かりやすく、
実際にやってみたら簡単に実現できました。感謝´д`)ノ♪

こんな感じです。
※プルダウンを選択すると過去の記事へリンクします。


■HTMLのソース

<form name="form1">
<select name="link" onChange="OpenLink()">
<option selected="selected" value="/2008/01/cakephp_manual">CakePHP:マニュアル読みスタート1</option>
<option value="/2008/02/cakephp_manual2">CakePHP:マニュアル読みスタート2</option>
<option value="/2008/02/mysql_timezone">MYSQL:タイムゾーンを変更したい</option>
<option value="/2008/03/no-mysqld-pid-file-found-looked-for">MYSQL:No mysqld pid file&#8230;.</option>
</select>
</form>

<script language="javascript">
<!--
function OpenLink(){
var n = document.form1.link.selectedIndex;
location.href = document.form1.link.options[n].value;
}
//-->
</script>

JavaScriptはこういうちょっとしたものでも便利なテクがあるのでサクっと使えるとかっこいいっすね!

 - JavaScript

SPONSORD LINKS

スポンサーリンク

スポンサーリンク

Message

メールアドレスが公開されることはありません。

  関連記事

no image
javascript:ラジオボタンのクリックでラベルの色を変更したい

ラジオボタン1 ラジオボタン2 こういうラジオボタンがあって、 選択されている方 ...