如果条件不满足，则阻止 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).

我希望这有帮助。