현재 드롭 다운에서 값을 변경할 때 사용자에게 확인을 요청하는 기능이 있습니다. 이것은 표준을 사용하여 잘 작동합니다 JavaScript
confirm()
. 여기에 바이올린이 있습니다.
var prev_val;
$('#dropdownId').focus(function () {
prev_val = $(this).val();
}).change(function () {
$(this).blur();
var success = confirm('Are you sure you want to change the Dropdown?');
if (success) {
// Proceed as normal.
} else {
// Reset the value & stop normal event
$(this).val(prev_val);
return false;
}
});
하지만을 사용 SweetAlert
하면 확인 / 취소하기 전에 항상 변경 이벤트가 발생합니다. 즉, 새 값을 선택하고 "취소"를 눌러도 이벤트를 중지하고 이전 값을 재설정하지 않습니다. 일반 JavaScript
confirm
대화 상자에서 수행합니다.
var prev_val;
$('#' + dropdownId).focus(function () {
prev_val = $(this).val();
}).change(function (e) {
$(this).blur();
return swal({
title: "Are you sure?",
text: "Do you want to change the dropdown?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
e.preventDefault();
return true;
} else {
$(this).val(prev_val);
return false;
}
});
});
예를 들어 함수 에서 반환 하고 작동하지 않는 함수 에서 반환하는 것과 JavaScript
같이 유효하지 않을 수도 있다는 점도 주목할 JavaScript
만합니다 .confirm
swal
그러나 인터넷 검색 후 비슷한 문제가있는 사람들을 찾았습니다.
그러나 그것은 어떤 행동을 방해하기 때문에 약간 엉망인 것처럼 보이지만 확인을 선택하면 기본적으로 호출되어야 할 함수를 다시 만듭니다. 아주 간단한 것에 대한 해킹처럼 보입니다.
SweetAlert
일반 confirm
대화 처럼 행동 할 가능성이 있습니까?
this
in swal
은 선택이 아니라 달콤한 경고 대화 상자 이므로 값이 다시 설정되지 않습니다 . 따라서 변경 이벤트에서 변경된 선택 요소를 보유하는 변수를 정의하고 사용자가 '아니오'를 클릭 할 때 값을 다시 설정하는 데 사용해야합니다.
.change(function(e) {
var select = this; // save select element to variable
$(this).blur();
return swal({
title: "Are you sure?",
text: "Do you want to change the dropdown?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
},
function(isConfirm) {
if (isConfirm) {
e.preventDefault();
return true;
} else {
$(select).val(prev_val); // use select reference to reset value
return false;
}
});
});
이 바이올린 에서 작동하는 예제를 찾을 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다