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

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

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

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



javascriptサンプル集 clear.gif  
javascriptでプルダウンメニューで別サイト(ページ)へジャンプ
サンプルソース

■プルダウンメニューを選択後すぐにジャンプする方法。

検索エンジン:



■プルダウンメニューを選択後にボタンをクリックしたらジャンプする方法。

検索エンジン:


ソース(source)

■プルダウンメニューを選択後すぐにジャンプする方法。
<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
<!--
function menuLink(linkLoc)
{ if(linkLoc !="") { window.location.href=linkLoc;} }
//-->
</script>
</head>
<body>
<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="www.excite.co.jp/">Excite</option>
<option VALUE="http://e-html.aofp.net/">Easy Study HTML</option>
</select>
</form>
</body>
</html>


■プルダウンメニューを選択後にボタンをクリックしたらジャンプする方法。

<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
<!--
function menuLink(linkLoc)
{ if(linkLoc !="") { window.location.href=linkLoc;} }
//-->
</script>
</head>
<body>
<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="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>

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

Agora