Получение значения select (выпадающего) до изменения

Question

То, чего я хочу достичь, - это когда всякий раз, когда меняется выпадающий список <select>, я хочу, чтобы значение выпадающего списка было перед изменением.Я использую версию 1.3.2 jquery и использую событие change, но значение, которое я получаю, остается после изменения.

<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>

Допустим, в настоящее время опция My выбрана, когда я изменяю ее на стексобытие onchange (т. е. когда я изменил его на стек), я хочу, чтобы это было предыдущее значение, т.е. мое ожидание в этом случае.

Как этого достичь?

Редактировать: В моем случае у меня есть несколько полей выбора на одной странице, и я хочу, чтобы ко всем из них применялась одна и та же вещь.Также все мои выбранные вставляются после загрузки страницы через ajax.

Answer 1

Объедините событие focus с событием change , чтобы достичь желаемого:

(function () {
    var previous;

    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function() {
        // Do something with the previous value after the change
        alert(previous);

        // Make sure the previous value is updated
        previous = this.value;
    });
})();

Рабочий пример: http://jsfiddle.net/x5PKf/766

Answer 2

пожалуйста, не используйте глобальную переменную для этого - сохраните значение prev в данных Вот пример: http://jsbin.com/uqupu3/2/edit

код для ссылки:

$(document).ready(function(){
  var sel = $("#sel");
  sel.data("prev",sel.val());

  sel.change(function(data){
     var jqThis = $(this);
     alert(jqThis.data("prev"));
     jqThis.data("prev",jqThis.val());
  });
});

только что увидел, что у вас есть много выборок на странице - этот подход также будет работать для вас, поскольку для каждого выбора вы будете сохранять предыдущее значение в данных выбора

Answer 3

Я выбираю решение Avi Pinto, в котором используется jquery.data()

Использование фокуса не является допустимым решением.Он работает при первом изменении параметров, но если вы останетесь на этом элементе выбора и нажмете клавишу «вверх» или «вниз».Он не будет проходить через событие фокусировки снова.

Таким образом, решение должно быть больше похоже на следующее:

Answer 4

Отслеживание значения вручную.

var selects = jQuery("select.track_me");

selects.each(function (i, element) {
  var select = jQuery(element);
  var previousValue = select.val();
  select.bind("change", function () {
    var currentValue = select.val();

    // Use currentValue and previousValue
    // ...

    previousValue = currentValue;
  });
});

Answer 5

 $("#dropdownId").on('focus', function () {
    var ddl = $(this);
    ddl.data('previous', ddl.val());
}).on('change', function () {
    var ddl = $(this);
    var previous = ddl.data('previous');
    ddl.data('previous', ddl.val());
});

Answer 6

Я использую событие "live", мое решение в основном похоже на Dimitiar, но вместо "focus" мое предыдущее значение сохраняется при срабатывании "click"

var previous = "initial prev value";
$("select").live('click', function () {
        //update previous value
        previous = $(this).val();
    }).change(function() {
        alert(previous); //I have previous value 
    });

Answer 7

Я знаю, что это старая ветка, но подумал, что могу добавить немного больше.В моем случае я хотел передать текст, val и некоторые другие данные.В этом случае лучше хранить весь параметр как предыдущее значение, а не только значение.

Пример кода ниже:

var $sel = $('your select');
$sel.data("prevSel", $sel.clone());
$sel.on('change', function () {
    //grab previous select
    var prevSel = $(this).data("prevSel");

    //do what you want with the previous select
    var prevVal = prevSel.val();
    var prevText = prevSel.text();
    alert("option value - " + prevVal + " option text - " + prevText)

    //reset prev val        
    $(this).data("prevSel", $(this).clone());
});

РЕДАКТИРОВАТЬ:

Я забыл добавить .clone () к элементу.не делая этого, когда вы пытаетесь вернуть значения, вы в конечном итоге получаете новую копию выбора, а не предыдущую.Использование метода clone () сохраняет копию выбора вместо его экземпляра.

Answer 8

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

//global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
  function (result) {
  if (result) {
     return true;
  } else {
      $("#dropDownList").val(previousValue).trigger('chosen:updated');  
     return false;
         }
  });
});

Answer 9

Как насчет использования пользовательского события jQuery с интерфейсом типа угловых часов;

// adds a custom jQuery event which gives the previous and current values of an input on change
(function ($) {
    // new event type tl_change
    jQuery.event.special.tl_change = {
        add: function (handleObj) {
            // use mousedown and touchstart so that if you stay focused on the
            // element and keep changing it, it continues to update the prev val
            $(this)
                .on('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .on('change.tl_change', handleObj.selector, function (e) {
                // use an anonymous funciton here so we have access to the
                // original handle object to call the handler with our args
                var $el = $(this);
                // call our handle function, passing in the event, the previous and current vals
                // override the change event name to our name
                e.type = "tl_change";
                handleObj.handler.apply($el, [e, $el.data('tl-previous-val'), $el.val()]);
            });
        },
        remove: function (handleObj) {
            $(this)
                .off('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .off('change.tl_change', handleObj.selector)
                .removeData('tl-previous-val');
        }
    };

    // on focus lets set the previous value of the element to a data attr
    function focusHandler(e) {
        var $el = $(this);
        $el.data('tl-previous-val', $el.val());
    }
})(jQuery);

// usage
$('.some-element').on('tl_change', '.delegate-maybe', function (e, prev, current) {
    console.log(e);         // regular event object
    console.log(prev);      // previous value of input (before change)
    console.log(current);   // current value of input (after change)
    console.log(this);      // element
});

Answer 10

Есть несколько способов достичь желаемого результата, это мой скромный способ сделать это:

Позвольте элементу сохранить свое предыдущее значение, поэтому добавьте атрибут 'previousValue'.

<select id="mySelect" previousValue=""></select>

После инициализации «предыдущее значение» теперь можно использовать в качестве атрибута.В JS для доступа к предыдущему значению этого выберите:

$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

После того, как вы закончили использовать 'previousValue', обновите атрибут до текущего значения.