Prevent Select from changing selected option if condition is not met

Question

I have a select box. Currently, this select box make an ajax call on change.

Now, I want to make call only when a condition is met.

So, here is my code:

$('#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
});

This prevents from making ajax call, however, this change the selected option of the select i.e, if option1 is selected at the begining and if I try to select next option then it will change the selected option to option2 then only check the status.

On searching on the internet, I got the option of 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);
});

However, using this focusin options makes the alert box to appear everytime no matter either I click cancel or ok. This might be because, it call focusin again whenevr I click Ok or Cancel.

What would be the best option to check this status, and if result is false, I don't want to change the selected option as well.

Update

Answer from marked as duplicate not preventing from changing the selected option. Its making ajax call on click i.e. before checking condition.

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

Finally, by mixing the link from Rory and idea of organizing code from some. I have find a solution for my problem. So, if anyone got stuck on the similar problem here is my solution.

$(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;
    }

Answer 2

Let us look at your function:

function checkDirtyStatus(){
  dirtyStatus = true; // I assume this is only for testing
  if(dirtyStatus === true){ // This can be simplified.
    if (confirm("Changes you made may not be saved.")) {
      return true;
    }else{
      return false;
    }
  }
}

confirm returns a Boolean that is either true or false, so you can simplify your function like this:

function checkDirtyStatus(){
  dirtyStatus = true;
  if(dirtyStatus){
    return confirm("Changes you made may not be saved.");
  }
  // Notice that you do not return anything here. That means that
  // the function will return undefined.
}

Your other function can be simplified like this:

$('#buildingSelect').on('change', function(){
  if(!checkDirtyStatus()){
    // Here you probably want to set the value of the select-element to the
    // last valid state. I don't know if you have saved it somewhere.
    return; 
  }

  //make ajax call
});