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

前回、シンプルなパターンのセレクトボックス機能を紹介しました。

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

今回、これに「選択肢のチェックを行い、場合によっては元に戻す」という機能を追加したいと思います。意外とネットで調べると周りくどい処理が多かったので、極力シンプルなものに仕上げてます。

今回、初期値セットが必要になるので注意してください。初期値をセットしたくない場合は、空の選択肢が必要かもしれません。

実装

<select id="selectbox" data-pre-value="value1">
  <option value="value1" selected>値１</option>
  <option value="value2">値２</option>
  <option value="value3">値３</option>
</select>

前回との違いは、selectタグに対してdata-pre-valueが付加、value1に対してselectedつまり初期値が設定されていることです。
もし初期値をvalue2にしたい場合は、data-pre-valueを”value2″にし、value2のoptionタグにselectedを付加してください。

jsはこんな感じ。

let target = document.querySelector('#selectbox');
target.addEventListener('change', function(e) {
    let changeValue = this.value;
    let preValue = this.dataset.preValue;

    let hasError = false;
    //何かしらの判定処理やアラートを実行
    if(hasError) {
        this.value = preValue;
    } else {
        this.dataset.preValue = changeValue;
    }
});

hasErrorに対して、エラーがあった場合はtrueを渡すと元の値がthis.valueにセットされます。
入力値判定する処理をコメントのところに書いてください。

まとめ

言語やフレームワークによってはイベントでpreValueがあったりしますがネイティブjsでは自作する必要があります。ぜひ上記の仕組みをコピペして使ってみてください。