Javascriptのonchangeを使用してセレクトボックスで選んだ値を箇条書きで表示させる

onchangeとは

onChangeとは、フォーム内のエレメント（要素）の内容が変更された時に起こるイベント処理の事です。
テキストボックスに書き込んだり、セレクトボックスでオプションを選択したりなどの行動によって発動するイベントを処理するします。
今回は、セレクトボックスで選んだ値を箇条書きで表示していきます。

htmlの部分

messages_test.php

<p>onchangeを使用して選んだ値を箇条書きで表示</p>
<select id="myselectbox" onchange="selectChange()">
    <option value="" selected>Please select...</option>
    <option value="Tokyo">Tokyo</option>
    <option value="Osaka">Osaka</option>
    <option value="Fukuoka">Fukuoka</option>
    <option value="New York">New York</option>
    <option value="New Jersey">New Jersey</option>
    <option value="Denver">Denver</option>
    <option value="Madrid">Madrid</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Ibiza">Ibiza</option>　
</select>
<button id="reset">リセット</button>
<ul id="selected">
</ul>

・onchange="selectChange()"はjavascriptの関数名を指定します。
・<button id="reset">リセット</button>は箇条書きで表示された値をボタンを押しリセットさせます。
・<ul id="selected">に選んだ値を箇条書きで表示します。親要素でもあります。

javascriptの部分

messages_test.php

<script>
 function selectChange(){
    //セレクトボックスで選んだ値を取得
    const value = document.getElementById("myselectbox").value;
    //値を表示させる為に、"li"を生成
    const li = document.createElement("li");
    //定数liにセレクトボックスで選んだ値を代入
    li.textContent = value;
    //親要素のid=selectedに子要素を追加（この流れで反映される。appendChiをしないとページには反映されない）
    document.getElementById("selected").appendChild(li);
    //ボタンを押したら、削除
    document.getElementById("reset").addEventListener("click",function(){
        li.remove();
    });
 }
</script>

・htmlの部分で記述した関数名「selectChange()」に今回の処理を記述します。
・const value = document.getElementById("myselectbox").value;はセレクトボックスで選んだ値を定数valueに代入しております。
・const li = document.createElement("li");は箇条書きで表示させる為に、liを生成します。
createElement（要素名）で生成することができます。
・li.textContent = value;は生成したliにセレクトボックスを選んだ値を代入します。textContentメソッドはテキストの情報を取得・設定することが出来ます。
・定数liに値が入った状態でページに反映させる処理を行います。document.getElementById("selected").appendChild(li);
上記は「document.親要素.appendChild(要素)」とすることでページに反映させることが出来ます。
これによって生成した定数liがページに反映されます。
・箇条書きで書かれている途中でリセットしたい場合は値が入った定数liを削除すれば消える為、removeメソッドを使用し削除させます。
document.getElementById("reset").addEventListener("click",function()
上記のコードはボタンをクリックしたら発生するというイベント処理を行うコードでございます。

画像

・以下の画像の様に、セレクトボックスで選んだ値が箇条書きで表示されます。

・リセットボタンを押すと、削除され箇条書きがなくなります。

以上がJavascriptのonchangeを使用して行う処理でした。
他にも沢山ある為、もっと学習していきます〜