|

ちょっと差のつくテクニック
JavaScript で遊ぼう
プルダウンメニューから項目を選ぶとフレームの内容が変化する
プルダウンメニューから項目を選ぶと、フレームの内容が変化します。 フレームの設置方法に関しては、「」をご参照ください。
設置方法
以下を <head> 内に貼りつけてください。
「top.contents.」の「contents」の部分を、フレームのターゲット名称に適宜変更します。
 |
<script language="javascript">
<!--
function Jump(sel) {
if (sel.options[sel.selectedIndex].value) {
top.contents.location.href = sel.options[sel.selectedIndex].value;
}
}
// -->
</script>
|
以下を 内ののプルダウンメニューを表示させたいところに貼り付けてください。
「*.html」には、飛ばしたい先のホームページ URL を記述し、「項目名(1)」には、プルダウンメニューに表示させる文字を記述します。
 |
<form method="post" action="" name="">
<select name="location" onChange="Jump(url)">
<option value="*.html">項目名(1)</option>
<option value="*.html">項目名(2)</option>
<option value="*.html">項目名(3)</option>
<option value="*.html">項目名(4)</option>
</select>
</form>
|
下 (↓) のテキストボックス」に必要な事項をいれて「サンプルを作成する」ボタンを押してください。
プルダウンメニューの HTML が生成されます。「サンプル HTML」の内容をコピーしてお使いください。
「(1) HEAD 部分」と「(2) BODY 部分」の 2 つの部分からなっていますので、この 2 つを併せて御利用いただくようお願いいたします。
|
|