Uzyskiwanie wartości select (menu rozwijane) przed zmianą

To, co chcę osiągnąć, to ilekroć <select>lista rozwijana jest zmieniana. Chcę wartość listy rozwijanej przed zmianą. Korzystam z jQuery w wersji 1.3.2 i używam przy zdarzeniu zmiany, ale wartość, którą tam otrzymuję, jest po zmianie.

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

Powiedzmy, że obecnie opcja My jest wybrana teraz, kiedy zmieniam ją na stos w zdarzeniu onchange (tj. Kiedy zmieniłem ją na stos) Chcę, aby była to poprzednia wartość, tj. Moja oczekiwana w tym przypadku.

Jak można to osiągnąć?

Edycja: W moim przypadku mam wiele pól wyboru na tej samej stronie i chcę, aby wszystkie te same elementy były stosowane. Również wszystkie moje zaznaczenia są wstawiane po załadowaniu strony przez ajax.

Połącz zdarzenie skupienia ze zdarzeniem zmiany , aby osiągnąć to, co chcesz:

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

Przykład roboczy: http://jsfiddle.net/x5PKf/766

nie używaj do tego globalnego var - zapisz poprzednią wartość w danych tutaj jest przykład: http://jsbin.com/uqupu3/2/edit

kod referencyjny:

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

właśnie zobaczyłem, że masz wiele wyborów na stronie - to podejście również zadziała, ponieważ dla każdego wyboru zapiszesz poprzednią wartość na danych wybranego

Wybieram rozwiązanie Avi Pinto, które wykorzystuje jquery.data()

Używanie fokusa nie jest prawidłowym rozwiązaniem. Działa przy pierwszej zmianie opcji, ale jeśli pozostaniesz na tym wybranym elemencie i naciśniesz klawisz „w górę” lub „w dół”. Nie przejdzie ponownie przez zdarzenie skupienia.

Tak więc rozwiązanie powinno wyglądać następująco:

//set the pre data, usually needed after you initialize the select element
$('mySelect').data('pre', $(this).val());

$('mySelect').change(function(e){
    var before_change = $(this).data('pre');//get the pre data
    //Do your work here
    $(this).data('pre', $(this).val());//update the pre data
})

Śledź wartość ręcznie.

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

 $("#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());
});

Używam zdarzenia „na żywo”, moje rozwiązanie jest w zasadzie podobne do Dimitiar, ale zamiast „skupienia” moja poprzednia wartość jest zapisywana po uruchomieniu „kliknięcia”.

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

zachowaj aktualnie wybraną wartość rozwijaną z wybraną jquery w zmiennej globalnej przed zapisaniem rozwijanej funkcji akcji „przy zmianie”. Jeśli chcesz ustawić poprzednią wartość w funkcji, możesz użyć zmiennej globalnej.

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

Co powiesz na użycie niestandardowego zdarzenia jQuery z interfejsem typu kątowego;

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

Wiem, że to stary wątek, ale pomyślałem, że mogę dodać trochę więcej. W moim przypadku chciałem przekazać tekst, val i kilka innych danych. W takim przypadku lepiej jest przechowywać całą opcję jako wartość poprzednią niż tylko wartość val.

Przykładowy kod poniżej:

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

EDYTOWAĆ:

Zapomniałem dodać .clone () do elementu. nie robiąc tego, gdy spróbujesz wycofać wartości, w końcu pobierzesz nową kopię zaznaczenia zamiast poprzedniej. Użycie metody clone () przechowuje kopię select zamiast jej instancji.

Dlaczego nie przechowujesz bieżącej wybranej wartości, a kiedy wybrany element zostanie zmieniony, będziesz mieć zapisaną starą wartość? (i możesz zaktualizować go ponownie, jak chcesz)

Użyj następującego kodu, przetestowałem go i działa

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

(function() {

    var value = $('[name=request_status]').change(function() {
        if (confirm('You are about to update the status of this request, please confirm')) {
            $(this).closest('form').submit(); // submit the form
        }else {
            $(this).val(value); // set the value back
        }
    }).val();
})();

Chciałbym wnieść inną opcję rozwiązania tego problemu; ponieważ zaproponowane powyżej rozwiązania nie rozwiązały mojego scenariusza.

(function()
    {
      // Initialize the previous-attribute
      var selects = $('select');
      selects.data('previous', selects.val());

      // Listen on the body for changes to selects
      $('body').on('change', 'select',
        function()
        {
          $(this).data('previous', $(this).val());
        }
      );
    }
)();

To używa jQuery, więc def. jest tutaj zależnością, ale można ją dostosować do pracy w czystym javascript. (Dodaj detektor do treści, sprawdź, czy pierwotny cel był funkcją select, wykonaj, ...).

Dołączając detektor zmian do treści, możesz być prawie pewien, że uruchomi się on po określonych detektorach dla selekcji, w przeciwnym razie wartość „data-previous” zostanie nadpisana, zanim będziesz w stanie ją odczytać.

Jest to oczywiście założenie, że wolisz używać osobnych detektorów dla poprzedniej wartości i wartości kontrolnej. Pasuje idealnie do wzoru pojedynczej odpowiedzialności.

Uwaga: Dodaje tę „poprzednią” funkcjonalność do wszystkich zaznaczeń, więc w razie potrzeby należy je dostroić.

To jest poprawa odpowiedzi @thisboris. Dodaje bieżącą wartość do danych, dzięki czemu kod może kontrolować, kiedy zmienna ustawiona na bieżącą wartość jest zmieniana.

(function()
{
    // Initialize the previous-attribute
    var selects = $( 'select' );
    $.each( selects, function( index, myValue ) {
        $( myValue ).data( 'mgc-previous', myValue.value );
        $( myValue ).data( 'mgc-current', myValue.value );  
    });

    // Listen on the body for changes to selects
    $('body').on('change', 'select',
        function()
        {
            alert('I am a body alert');
            $(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
            $(this).data('mgc-current', $(this).val() );
        }
    );
})();

Najlepsze rozwiązanie:

$('select').on('selectric-before-change', function (event, element, selectric) {
    var current = element.state.currValue; // index of current value before select a new one
    var selected = element.state.selectedIdx; // index of value that will be selected

    // choose what you need
    console.log(element.items[current].value);
    console.log(element.items[current].text);
    console.log(element.items[current].slug);
});

Istnieje kilka sposobów na osiągnięcie pożądanego rezultatu, to mój skromny sposób:

Niech element zachowa poprzednią wartość, więc dodaj atrybut „previousValue”.

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

Po zainicjowaniu „previousValue” może być teraz używany jako atrybut. W JS, aby uzyskać dostęp do poprzedniej wartości tego wybierz:

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

Po zakończeniu korzystania z „previousValue” zaktualizuj atrybut do bieżącej wartości.

Musiałem ujawnić inny div na podstawie wyboru

W ten sposób możesz to zrobić za pomocą jquery i składni es6

HTML

<select class="reveal">
    <option disabled selected value>Select option</option>
    <option value="value1" data-target="#target-1" >Option 1</option>
    <option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
    option 1
</div>
<div id="target-2" style="display: none">
    option 2
</div>

JS

$('select.reveal').each((i, element)=>{
    //create reference variable 
    let $option = $('option:selected', element)
    $(element).on('change', event => {
        //get the current select element
        let selector = event.currentTarget
        //hide previously selected target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).hide()
        }
        //set new target id
        $option = $('option:selected', selector)
        //show new target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).show()
        }
    })
})