javascript - 如果不满足条件，则阻止 Select 更改所选选项

Question

我有一个选择框。目前，此选择框对 change 进行 ajax 调用。

现在，我只想在满足条件时才进行调用。

所以，这是我的代码:

$('#buildingSelect').on('change', function(){
    var result = checkDirtyStatus();
    //this checkDirtyStatus alert message if there is some changes on the form.
    //if cancel return false, if confirm return true.
    if(result === false) {
        return;
    }
    //make ajax call
});

这可以防止进行 ajax 调用，但是，这会更改选择的选定选项，即，如果在开始时选择了 option1 并且如果我尝试选择下一个选项，那么它将更改选定的option to option2 然后只检查状态。

在网上搜索，我得到了focusin的选项。

$('#buildingSelect').on('focusin', function(){
    // console.log("Saving value " + $(this).val());
    var result = checkDirtyStatus();
    if(result === false) {
        return;
    }
}).on('change', function(){
    g_building_id = $(this).val();
    getAmenitiesDetails(g_building_id);
});

但是，无论我单击cancel 还是ok，使用此focusin 选项都会使警告框每次都出现。这可能是因为，每当我单击 Ok 或 Cancel 时，它都会再次调用 focusin。

检查此状态的最佳选项是什么，如果结果为假，我也不想更改所选选项。

更新

标记为重复的答案不会阻止更改所选选项。它在点击时进行 ajax 调用，即在检查条件之前。

CodePen Link

function checkDirtyStatus(){
        dirtyStatus = true;
        if(dirtyStatus === true){
            if (confirm("Changes you made may not be saved.")) {
                return true;
            }else{
                return false;
            }
        }
    }

Answer 1

最后，通过混合来自 Rory 的链接和组织代码的想法。我找到了解决我的问题的方法。所以，如果有人遇到类似问题，我的解决方案就是这里。

$(function(){
    var lastSel;
    $('#buildingSelect').on('focusin', function(){
        lastSel = $("#buildingSelect option:selected");
    }).on('change', function(){
        if(!checkDirtyStatus()) {
            lastSel.prop("selected", true);
            return;
        }else{
            //made ajax call
           //$.ajax({})
        }
    });
});
function checkDirtyStatus(){
        let dirtyStatus = getDirtyStatus();
        if(dirtyStatus){
            return confirm("Changes you made may not be saved.");
        }
        return true;
    }