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

Question

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

现在，我只想在满足条件时拨打电话。

所以，这是我的代码：

$('#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在开始时选择并且如果我尝试选择下一个选项，那么它将更改选定的选项，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);

});

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

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

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

Answer 2

让我们看看你的功能：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;    }  }}确认返回一个布尔值，它要么是真要么是假，所以你可以像这样简化你的函数：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.}您的其他功能可以这样简化：$('#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});

Answer 3

我玩过你的 codepen，你的选择器有一些错误。当我对您的解释感到困惑时，我将尝试解释您可以更新的内容以及如何在您的代码中使用它，我希望这是您解决问题所需要的。首先，我会将您的 js 更改为：var lastSel = $("#buildingSelect").val();$("#buildingSelect").on("change", function(){  if ($(this).val()==="2") {    $(this).val(lastSel);    return false;  }});在 jquery 中获取选择框值的正确方法是使用.val(). 在您的情况下，您选择了整个选定的选项元素。我将此值存储在lastSel变量中。然后在更改函数中，选择列表的新值是$(this).val()。我检查这个值，如果它等于 2，我将它恢复为存储在 lastSel 变量中的值$(this).val(lastSel)。请记住，选择列表的值始终是字符串，如果要检查数字，必须首先将其转换为数值，例如使用 parseInt。如果您想使用 checkDirtyStatus 进行检查，那么您应该只在更改中调用此函数并将 lastSel 和 newSel 作为参数传递，如下所示：$("#buildingSelect").on("change", function(){  checkDirtyStatus(lastSel, $(this).val());});然后，您可以将更改函数中的逻辑转移到 checkDirtyStatus 函数中，并在那里进行检查。在这种情况下，如果您希望恢复选择值而不是$(this).val(lastSel)您将执行$("#buildingSelect").val(lastSel).我希望这有帮助。