JavaScriptを使ってselectで選択したoptionの値を動的に出力

<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(生成した要素)を追加して表示

結果

セレクトボックスを操作するたびに、黄色いボックスが生成されて選択中の値が表示される。