AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

トップ > JavaScript > jQueryでプルダウンの変更を取り消す

jQueryでプルダウンの変更を取り消す

JavaScript

業務でプルダウン変更時に変更するかどうか確認メッセージを出したいと言われてjQuery使って実装した時のサンプル

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="utf-8">
	<title>プルダウンの変更を取り消す</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="./jquery-3.3.1.min.js"></script>
	<script>
	    $(document).ready(function(){
                var changePulldown = function() {
		    var value = $("#pulldown").val();
		    console.log("プルダウン初期化:value = " + value);
		    return function() {
		        if (confirm("プルダウンの変更を取り消しますか？")) {
                            $("#pulldown").val(value);
                        } else {
                            value = $("#pulldown").val();
                            console.log("プルダウン変更:value = " + value);
                        }
                    };
                };
                $("#pulldown").on("change", changePulldown());
           });
		
	</script>
</head>
<body>
<select id="pulldown">
	<option value="1">選択項目1</option>
	<option value="2">選択項目2</option>
	<option value="3">選択項目3</option>
</select>
</body>
</html>

画面読み込んだ時にプルダウン変更時のイベントにchangePulldown ()で返された関数をバインドします。

changePulldown ()実行時にvalueに選択してる値が保持され、

プルダウン変更時に確認ダイアログが表示され、変更を取り消す場合はvalueの値を再設定。

変更を有効にする場合はvalueに現在選択している値を設定します。

ちなみにval()で値を設定した時にchangeイベントは発生しません。

サンプル