ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 javascriptサンプル集

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



javascriptサンプル集 clear.gif  
javascriptでプルダウンメニューで別サイト(ページ)へジャンプ
プルダウンメニューはサイトがスマートに収まるのでサイトの種類によっては便利です。
プルダウンメニューで選択後すぐにリンク先へジャンプする方法と、選択後ボタンをクリックしてからジャンプする方法があります。
サンプルソース
■プルダウンメニュー選択後すぐにジャンプする例

<html>
<head>
<title>javascriptでプルダウンメニューで別サイト(ページ)へジャンプ</title>
<script LANGUAGE="JavaScript">
<!--
function menuLink(linkLoc)
{ if(linkLoc !="") { window.location.href=linkLoc;} }
//-->
</script>

</head>
<body>
<strong>プルダウンメニューで別サイト(ページ)へジャンプ</strong><br>
<br>
<form>
検索エンジン:<select onChange="menuLink(this.options[this.selectedIndex].value)">
<option selected>選択して下さい...</option>
<option VALUE="http://www.yahoo.co.jp/">yahoo!</option>
<option VALUE="http://www.google.co.jp/">Google</option>
<option VALUE="http://www.goo.ne.jp/">goo</option>
<option VALUE="http://www.excite.co.jp/">Excite</option>
<option VALUE="http://e-html.aofp.net/">Easy Study HTML</option>
</select>
</form>

</body>
</html>

※<option>タグの"selected"が記述してあるのが初期値(最初に表示)される設定です。

■プルダウンメニュー選択後に「Go」をクリックしたらジャンプする例

<html>
<head>
<title>javascriptでプルダウンメニューで別サイト(ページ)へジャンプ</title>
<script LANGUAGE="JavaScript">
<!--
function menuLink(linkLoc)
{ if(linkLoc !="") { window.location.href=linkLoc;} }
//-->
</script>

</head>
<body>
<strong>プルダウンメニューで別サイト(ページ)へジャンプ</strong><br>
<br>
<form NAME="form1">
検索エンジン:<select NAME="linkMenu">
<option selected>選択して下さい...</option>
<option VALUE="http://www.yahoo.co.jp/">yahoo!</option>
<option VALUE="http://www.google.co.jp/">Google</option>
<option VALUE="http://www.goo.ne.jp/">goo</option>
<option VALUE="http://www.excite.co.jp/">Excite</option>
<option VALUE="http://e-html.aofp.net/">Easy Study HTML</option>
</select>
<input type="button" VALUE="Go" onClick="menuLink(document.form1.linkMenu.options [ document.form1.linkMenu.selectedIndex ] .value)">
</form>

</body>
</html>

※<form>タグ<select>タグの修正、<input>タグの追加をしました。
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora