[HTML]プルダウン(ドロップダウン)リストを作成してjsで変更後の値を取得するまで

人によって呼び方が違うコントロールの代表格、「選択肢が下ににゅっと出て選べるやつ」を実装します。
プルダウンメニュー(リスト)、ドロップダウンメニュー(リスト)、もしくはセレクトボックス…
どれが正解なんでしょうね！

今回はシンプルなものです。次回はこれをカスタマイズして、「変更後の値判定を行い、必要であれば元に戻す」というものを実装します。

[HTML+js]プルダウン・ドロップダウンメニュー(リスト)に判定機能を付け加える

では今回のコードはこちら。

実装

HTMLはこんな感じ。

<select name="testbox" id="selectbox">
        <option value="value1">値１</option>
        <option value="value2">値２</option>
        <option value="value3">値３</option>
</select>

そしてjs側はこちら。

let target = document.querySelector('#selectbox');
    target.addEventListener('change', function(){
        alert(this.value);
    });

これで変更されるたびにthis.valueにセットされている、新しい選択値をアラート表示します。簡単ですね。