Предотвратить дефолт по событию изменения

Question

У меня есть выпадающая именная сеть. Для конкретной сети мы можем ввести количество контрактов. Допустим, мы ввели 3 Контракт для сети. И если пользователь ошибочно изменит выпадение, тогда все три контракта будут уничтожены.

Так что я пытаюсь сделать, это дать диалоговое окно с сообщением «ОК» или «Отмена». Если они нажмут «ОК», будет выбрана новая Сеть из списка «Выпадающий список», и все контракты будут уничтожены, если они нажмут «Отмена», там не будет никаких изменений.

Я пытаюсь использовать e.PreventDefault() и помещая это перед диалоговым окном предупреждения. Но элемент Drop Down изменяется даже до появления диалогового окна предупреждения. И поскольку это событие сбрасывания изменений, e.PreventDefault не работает.

Может ли кто-нибудь мне помочь.

function networkIdChangeEvent(event) { 
    if (atLeastOneContract()) { 
    event.preventDefault(); 
    showWarningDialog(closeDialogMsg, okFunction, cancelFunction) 
    } 
} 

Answer 1

Вы можете попробовать вместо

возвращение ложным

, который должен работать на EventListener, если JQuery обработчик события. Если событие не JQuery, то Примечание: метод preventDefault() не предотвращает дальнейшее распространение события через DOM. Используйте метод stopPropagation() для этого.

Answer 2

Попробуйте этот подход:

<script> 
    window.onload = function() { 
     (function() { 
      for (var i = 0, n = arguments.length; i < n; i++) { 
       var elem = document.getElementById(arguments[i]); 
       elem.prevValue = elem.value; 
       elem.onchange = function (e) { 
        console.log('prev ' + this.id + '; ' + this.prevValue); 
        var ok = confirm('Are you sure?'); 
        if (ok) 
         this.prevValue = this.value; 
        else 
         this.value = this.prevValue; 
        console.log('new ' + this.id + '; ' + this.prevValue); 
       } 
      } 
     })('sel', 'sel1'); 
    } 
</script> 

Ваш Dropdowns:

<select id="sel"> 
     <option value="-1">select</option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
    </select> 
    <select id="sel1"> 
     <option value="-1">select</option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
    </select> 

Я надеюсь, что эта идея будет полезна.