Javascript 如果不满足条件，则禁止选择更改所选选项

我有一个选择框。目前，这个选择框对更改进行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调用，但是，这会更改选择的选定选项，即，如果在开始时选择了选项1，并且如果我尝试选择下一个选项，则会将选定选项更改为选项2，然后仅检查状态

在互联网上搜索时，我可以选择聚焦

但是，无论我单击“取消”或“确定”，使用此“聚焦”选项都会使警报框每次都出现。这可能是因为，当我单击“确定”或“取消”时，它会再次调用focusin

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

使现代化 来自标记为重复的答案不阻止更改所选选项。它在单击时即在检查条件之前进行ajax调用

---

让我们看看您的功能：

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

返回一个布尔值，该布尔值为true或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
});

$("#buildingSelect").on("change", function(){
  checkDirtyStatus(lastSel, $(this).val());
});

您的其他功能可以简化如下：

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

$("#buildingSelect").on("change", function(){
  checkDirtyStatus(lastSel, $(this).val());
});

---

最后，通过混合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;
    }

---

我玩了你的密码笔，你的选择器有一些错误。当我被你的解释弄糊涂时，我将尝试解释你可以更新什么以及如何在你的代码中使用它，我希望这就是你解决问题所需要的

首先，我将您的js更改为：

var lastSel = $("#buildingSelect").val();
$("#buildingSelect").on("change", function(){
  if ($(this).val()==="2") {
    $(this).val(lastSel);
    return false;
  }
});

在jquery中获取选择框值的正确方法是使用.val。在本例中，您选择了整个选定选项元素。 我将此值存储在lastSel变量中。然后在change函数中，选择列表的新值为$this.val。我对照这个值进行检查，如果它等于2，我将它还原为存储在带有$this.vallastSel的lastSel变量中的值。 请记住，选择列表的值始终是一个字符串，如果要对照某个数字进行检查，则必须首先将其转换为数值，例如使用parseInt

如果要使用checkDirtyStatus进行检查，则应仅在change中调用此函数，并将lastSel和newSel作为参数传递，如下所示：

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

$("#buildingSelect").on("change", function(){
  checkDirtyStatus(lastSel, $(this).val());
});

然后，您可以将逻辑从change函数转移到checkDirtyStatus函数，并在那里进行检查。在这种情况下，如果您希望还原select值而不是$this.vallastSel，您将执行$buildingSelect.vallastSel

---

我希望这能有所帮助。

@Rorymcrossan这行不通。它仍在更改所选的值。正如您在副本本身的示例中所看到的那样，这确实非常有效。如果它不适合您，那么代码中的某个地方就有问题。请更新您的问题以包含它，以便我们可以帮助您进行调试。@Rorymcrossan您可以检查问题中提供的代码笔链接，它只是在单击时进行不必要的ajax调用，这意味着当我打算在ajax调用之前检查条件时，它是如何阻止ajax调用的。这是因为每次单击都会发生。您需要在if result==false块中进行AJAX调用，作为“脏”检查passed@RoryMcCrossan你能提供代码笔链接的链接吗。我已经在这里更新了代码。在这里，这是第一次。如果您选择ok，它将进行ajax调用，这是完全正确的。然而，在那之后，每次点击都会发送ajax调用。要复制，请选择选项2，然后单击“确定”。之后，点击发送ajax调用。