プルダウンでページを切り替える流れを整理してみました。ちなみに今回は気分転換で全て英語表記にしてみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu Redirect</title>
<style>
/* スタイル（css）設定 */
* {
margin: 0px;
padding: 0px;
}
div#mainbox {
width: 600px;
height: 100px;
margin: 50px auto;
text-align: center;
}
</style>
<script>
/* スクリプト（js）設定 */
function redirectToPage() {
var selectedOption =
document.getElementById("selectMenu").value;
if (selectedOption) {
window.location.href = selectedOption;
}
}
</script>
</head>
<body bgcolor="deepskyblue">
<div id="mainbox">
<form>
<label for="selectMenu">
Display the page specified in the pull-down menu.
</label>
<br>
<select id="selectMenu" onchange="redirectToPage()">
<!--
プルダウンメニューで選択した項目に応じ、
redirectToPage() 関数が呼び出される。
その後、選択された項目に対応するURLにリダイレクト
-->
<option value="">Select Fish</option>
<option value="page_01.html">Blue Fish</option>
<option value="page_02.html">Yellow Fish</option>
<option value="page_03.html">Green Fish</option>
<!--
各<option>要素のvalue属性にリダイレクト先のURLを設定。
プルダウンメニューから項目を選択すると、
選択された項目に対応するURLに自動的に移動
-->
</select>
</form>
</div>
</body>
</html>
<!-- index.html -->
<!-- page_01.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blue Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="crimson">
<div id="mainbox">
<div class="container">
<img src="links/fish_01.png" alt="Blue Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_01.html -->
<!-- page_02.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yellow Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="mediumblue">
<div id="mainbox">
<div class="container">
<img src="links/fish_02.png" alt="Yellow Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_02.html -->
<!-- page_03.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Green Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="darkorange">
<div id="mainbox">
<div class="container">
<img src="links/fish_03.png" alt="Green Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_03.html -->
トップページ
Blue Fish Page
Yellow Fish Page
Green Fish Page
