プルダウン選択変化

プルダウンメニュー選択により表示内容を変更させるJavaScriptです。項目は好きなだけ増やす事が可能でタグによるマークアップにも対応しています。指定した箇所に起点配置も可能ですので、簡単な自作コンテンツ作成にも適しています。OPTION要素とDIV要素の内容を変更して使用して下さい。

<head>
</head>
<body>

<form action=".">
<select onchange="document.getElementById('pulldown'+pulldownNo).style.display='none';document.getElementById('pulldown'+(pulldownNo=(this.selectedIndex+1))).style.display='block'">
<option selected>表示選択</option>
<option>コピーボックス</option>
<option>テキスト色変更</option>
<option>ハイパーリンク</option>
</select>
</form>
<script type="text/javascript">
var pulldownNo=1;
</script>

<div id="pulldown1"></div>
<div id="pulldown2" style="display:none"><form action="."><textarea cols="20" rows="1">コピーボックス</textarea></form></div>
<div id="pulldown3" style="display:none"><font color="#ff0000">テキスト色変更</font></div>
<div id="pulldown4" style="display:none"><a href="http://makemobile.6.tool.ms/103/">ハイパーリンク</a></div>

</body>

>>戻る

mono space