<html>
<head>
<title>test</title>
<script type="text/javascript">
function addElement(select) {
var str = select.value;
var element = document.createElement('div');
element.class = "fruit";
element.innerHTML = "選択中：" + str;
element.style.backgroundColor = 'yellow';
var obj = document.getElementById("sample");
obj.appendChild(element);
}
</script>
</head>
<body>
<p>test form</p>
<div id="sample">
<select onchange="addElement(this);">
<option value="apple">1</option>
<option value="banana">2</option>
</select>
</div>
</body>
</html>
ポイント
onchange — selectに変更があったときにスクリプトを呼び出す
select.value — 引数に入力したセレクトフォームを”select”で受け取り、選択中のoptionの値を取得
document.createElement(‘div’) — 取得したoptionの値を表示させる要素を生成
obj.appendChild(element) — obj(フォームの親要素のdiv)にelement(生成した要素)を追加して表示
結果
セレクトボックスを操作するたびに、黄色いボックスが生成されて選択中の値が表示される。
