jquery - 有条件地阻止下拉选择的更新

Question

我正在尝试实现下拉选择的更改事件处理程序。因此，我必须有条件地阻止选择更新。

请找到我尝试过的 fiddler 示例 https://jsfiddle.net/Linoy/rxdtcquw/19/

<select id="my_select">
    <option class='no-update'>Option 1</option>
    <option>Option 2</option>
</select>


$('select').change(function(event) {

     if ($(this).find(":selected").hasClass('no-update')) {
        event.preventDefault();
        alert('Unfortunalty selector is changing here..');
      }
});

搜索StackOverflowflow后，我在这里找到了一个解决方案，但对我来说，它在JQuery 1.5.2版本以上不起作用。

jQuery prevent change for select

还有其他想法或修复来实现相同的目的吗？

Answer 1

我已经更新了您的代码片段中的几行代码，您可以在下面找到它:

var lastSelection = $("#my_select option:selected");
$('select').change(function() {
  if (!$(this).hasClass('no-update')) {
    lastSelection.prop("selected", true);
  }
});

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<select id="my_select">
    <option class='no-update'>Option 1</option>
    <option>Option 2</option>
</select>

首先，我将最初选择的值存储到一个变量中。然后我对if条件进行了更改。所以我改变了

if ($(this).find(":selected").hasClass('no-update')){}

至

if (!$(this).hasClass('no-update')){}

因此如果这个条件满足，它将保留之前的状态。

lastSelection.prop("selected", true);

下面是另一种可能的解决方案，其中我们不使用 .no-update 类，而是使用 确认框 来更新选择选项

var lastSelection = $("#my_select option:selected");
$('#my_select').change(function() {
  if (confirm('Are You Sure? Do you want to continue?')) {
    lastSelection = $(this).find('option:selected');
  }else{
    lastSelection.prop("selected", true);
  }
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<select id="my_select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>