JQuery - отменить событие изменения в диалоговом окне подтверждения для раскрывающегося списка

У меня есть раскрывающийся список, и у меня есть функция jQuery "change".

Я хотел бы реализовать изменение выбранного элемента в соответствии с диалоговым окном подтверждения.

Если подтверждение true, я могу перейти к выбранному изменению, иначе я сохраню существующий элемент как выбранный и отменит событие изменения.

Как я могу реализовать это с помощью jQuery...????

Функция jquery

<script type="text/javascript">
    $(function () {

        $("#dropdown").change(function () {

               var success = confirm('Are you sure want to change the Dropdown ????');

                    if (success == true) {
                        alert('Changed');  

// do something                  
                     }
                    else {

                        alert('Not changed');

                       // Cancel the change event and keep the selected element
                     }
        });
    });

</script>

NB: Одна вещь, чтобы помнить, что функция "изменить" работает только после того, как выбранный элемент изменен Так лучше подумать, чтобы реализовать это на "onchange" - но он недоступен в jquery и есть ли какой-либо метод для реализации этого??

Любая помощь будет оценена...

Vinu

Ответы

Ответ 1

Ну, как справедливо указал Vinu, событие jQuery change запускается только после того, как значение выбора действительно было изменено. Вам было бы лучше сделать что-то вроде этого:

var prev_val;

$('#dropdown').focus(function() {
    prev_val = $(this).val();
}).change(function() {
     $(this).blur() // Firefox fix as suggested by AgDude
    var success = confirm('Are you sure you want to change the Dropdown?');
    if(success)
    {
        alert('changed');
        // Other changed code would be here...
    }  
    else
    {
        $(this).val(prev_val);
        alert('unchanged');
        return false; 
    }
});

Ответ 2

Что-то вроде того, что я здесь сделал?

http://jsfiddle.net/Swader/gbdMT/

Просто сохраните это значение, как только пользователь нажмет на поле выбора и вернется к этому значению, если подтверждение onchange возвращает false.

Вот код из моей скрипки:

var lastValue;

$("#changer").bind("click", function(e) {
    lastValue = $(this).val();
}).bind("change", function(e) {
    changeConfirmation = confirm("Really?");
    if (changeConfirmation) {
        // Proceed as planned
    } else {
        $(this).val(lastValue);
    }
});

Ответ 3

Используйте следующий код, я проверил его и его работу

var prev_val;
$('.dropdown').focus(function() {
    prev_val = $(this).val();
}).change(function(){
            $(this).unbind('focus');
            var conf = confirm('Are you sure want to change status ?');

            if(conf == true){
                //your code
            }
            else{
                $(this).val(prev_val);
                $(this).bind('focus');
                return false;
            }
});

Ответ 4

Ниже приведен код для радиокнопки. Я думаю, что этот код с незначительными изменениями можно также использовать для выпадающего списка.

      <input type="radio" class="selected" value="test1" name="test1" 
      checked="checked" /><label>test1</label>

      <input type="radio" name="test1" value="test2" /><label>
      test2</label>

      <input type="radio" name="test1" value="test3" /><label>
      test3</label>

</div>

 $("input[name='test1']").change(function() {
        var response = confirm("do you want to perform selection change");
        if (response) {
            var container = $(this).closest("div.selection");
            //console.log(container);
            //console.log("old sel =>" + $(container).find(".selected").val());
            $(container).find(".selected").removeClass("selected");
            $(this).addClass("selected");
            //console.log($(this).val());
            console.log("new sel =>" + $(container).find(".selected").val());
        }
        else {
            var container = $(this).closest("div.selection");
            $(this).prop("checked", false);
            $(container).find(".selected").prop("checked", true);
        }
    });

Ответ 5

Размытие, фокусировка и сохранение предыдущих значений кажутся немного громоздкими. Я решил эту проблему, присоединив мой слушатель не к выбору, а к опции:

$("#id").on('mousedown','option',confirmChange);

то

function confirmChange(e){
    var value = $(this).val(),
        c = confirm('Are you sure you want to change?');

    if(c)
        $(this).parent().val(value);//can trigger .change() here too if necessary
    else
        e.preventDefault();
}

Конечно, можно сделать оптимизацию, но это общая идея.