Question

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

请找到我尝试的小提琴样本 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

我更新了您的代码段的几行代码，您可以在下面找到它：

＆＃13;

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

＆＃13;

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

＆＃13;

首先，我已将最初选择的值存储到变量中。然后我在if condition进行了更改。所以我改变了

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

到

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

所以如果此条件符合，则保留以前的状态。

lastSelection.prop("selected", true);

以下是另一种可能的解决方案，我们不使用.no-update类，而是使用confirm box更新选择选项

＆＃13;

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

＆＃13;

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

＆＃13;

有条件地防止下拉选择的更新

1 个答案: