Получение ранее выбранного элемента в окне выбора с помощью jQuery

Question

У меня есть поле выбора HTML одного элемента, в котором я хотел бы узнать, какой элемент был выбран непосредственно перед изменением выбора на новый элемент.

К моменту запуска события изменения уже слишком поздно:

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
      // this will get me the current selected item (the new one)
      str += $(this).text() + " "; });          
})

В документах говорится, что «событие изменения срабатывает, когда элемент управления теряет фокус ввода, а его значение было изменено с момента получения фокуса».

Тем не менее, захват события 'blur', похоже, не является правильным событием, и нет никакого типа "onFocusLost" ..

Это возможно в кросс-браузерном режиме без большого количества прыжков с обручем?

Answer 1

Это должно захватить значение, прежде чем оно изменится. Значение будет получено, как только пользователь откроет меню выбора, но до того, как он действительно что-то выберет.

        $(document).ready(function(){
            $('select').focus(function(){
                var theValue = $(this).attr('value');
            });
    });

Answer 2

Вы могли бы сделать что-то вроде этого

$(document).ready(function() {
    $("select").each(function(){
        var str = getSelectedText(this);
        $(this).data('selected',str);
    }).change(function () {
        var str = getSelectedText(this);
        var selectedbefore = $(this).data('selected');
        $(this).data('selected',str);
    });
});
function getSelectedText(obj){
    var str = "";
    $(obj).closest('select').find("option:selected").each(function () {
        str += $(this).text() + " ";
    });
    return str;
}

Answer 3

Просто мысль, но разве нельзя, если вы обработаете событие изменения, установите значение для некоторой переменной, поэтому в следующий раз, когда вы обработаете это, у вас будет это значение?

Answer 4

Вот современное решение с использованием .on

$('#form-id').on('focus','select',function(){
 var previous = $(this).children('option').filter(':selected').val();
});

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

Мое решение состояло в том, чтобы добавить атрибут «предыдущий» к элементу выбора, заполненному значением на выходе, а затем изменить его на результат «успеха» из Ajax при сохранении:

<select name="status" id="status" previous="D"> ... </select>

Затем, когда пользователь нажал кнопку отмены во всплывающем окне с подтверждением или произошла ошибка Ajax, которую я только что сделал:

$('#status').val($('#status').attr('previous')).attr('selected',true);

и если после Ajax "success" измените атрибут "previous" на новое успешно сохраненное значение:

$('#status').attr('previous',$('#status').children('option').filter(':selected').val());

Подходит для одного элемента формы, но мне потребовалась адаптация, где у меня есть список учетных записей, каждая с меню выбора настроек статуса учетной записи, которое вызывает диалоговое окно jQuery UI, которое, в свою очередь, расшифровывает Ajax Call, чтобы сохранить настройку, A одна скрытая форма с набором полей заполняется значениями из меню выбора, используя .on ('change')

Вот одно из выбранных меню (обычно используются уникальные идентификаторы, но в моем случае есть несколько причин на стороне сервера, почему я не могу использовать их в этот раз, следовательно, комбинированное использование атрибутов "rel" и " type ", один и тот же код сохраняет изменения в разных таблицах базы данных):

<select name="status" rel="23" type="company" previous="P">
    <option value="P" selected="selected">Pending</option>
    <option value="D">Deactivated</option>
    <option value="A">Activated</option>
</select>

Поскольку в сценарии есть 3 точки, где может произойти сбой, и один успех имеет смысл создать функцию:

function set_select(saved)
    {
        var e = $(':input[type="'+$('#status-type').val()+'"][rel="'+$('#status-id').val()+'"]');
        if(saved) e.attr('previous',e.children('option').filter(':selected').val());
        e.val( e.attr('previous') ).attr('selected',true);  
    };

Вот код диалога jQuery UI:

    $('#update-confirm').dialog({
        autoOpen:false,
        resizable:false,
        height:230,
        modal:true,
        buttons:{
            "Change": function(){
                var exec = false;
                $dialog = $(this);
                switch($('#status-type').val())
                {
                    default: set_select(false); break;
                    case 'company': exec = 'save-company-status'; break;
                    case 'user': exec = 'save-user-status'; break;
                };
                if(exec)
                {
                    $.ajax({
                        type: 'POST',
                        url: '/sys.manager/apps.manager.php?do='+exec,
                        data: $('#form-status').serialize(),
                        success: function(response)
                        {
                            if(!response.result || response.result == 'false')
                            { 
                                console.log('Fail');
                                set_select(false);
                            } else {
                                console.log(response.result);
                                console.log(response.mail);
                                $dialog.dialog('close');
                                set_select(true);
                            }

                        },
                        error: function(response) {
                            set_select(false);
                        }
                    });
                };
            },
            Cancel: function() {
                set_select(false);
                $(this).dialog('close');
            }
        }
    });