Obtenir la valeur de select (liste déroulante) avant le changement

Ce que je veux réaliser, c'est que chaque fois que la <select>liste déroulante est modifiée, je veux la valeur de la liste déroulante avant le changement. J'utilise la version 1.3.2 de jQuery et j'utilise l'événement on change, mais la valeur que j'obtiens là-bas est après le changement.

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

Disons que l'option actuellement My est sélectionnée maintenant lorsque je la change en pile dans l'événement onchange (c'est-à-dire quand je la change en pile) Je veux que sa valeur précédente soit ma attendue dans ce cas.

Comment cela peut il etre accompli?

Edit: Dans mon cas, j'ai plusieurs cases de sélection sur la même page et je veux que la même chose soit appliquée à toutes. De plus, toutes mes sélections sont insérées après le chargement de la page via ajax.

Combinez l' événement focus avec l' événement change pour obtenir ce que vous voulez:

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

Exemple de travail: http://jsfiddle.net/x5PKf/766

veuillez ne pas utiliser de var globale pour cela - stockez la valeur précédente dans les données voici un exemple: http://jsbin.com/uqupu3/2/edit

le code pour ref:

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

vient de voir que vous avez de nombreux choix sur la page - cette approche fonctionnera également pour vous car pour chaque sélection, vous stockerez la valeur précédente sur les données de la sélection

Je choisis la solution d'Avi Pinto qui utilise jquery.data()

L'utilisation de focus n'est pas une solution valable. Cela fonctionne la première fois que vous modifiez les options, mais si vous restez sur cet élément de sélection, et appuyez sur la touche "haut" ou "bas". Il ne passera plus par l'événement focus.

Donc, la solution devrait ressembler davantage à ce qui suit,

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

Suivez la valeur à la main.

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

J'utilise l'événement "live", ma solution est fondamentalement similaire à Dimitiar, mais au lieu d'utiliser "focus", ma valeur précédente est stockée lorsque "click" est déclenché.

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

conservez la valeur déroulante actuellement sélectionnée avec jquery choisi dans une variable globale avant d'écrire la fonction d'action déroulante 'on change'. Si vous souhaitez définir la valeur précédente dans la fonction, vous pouvez utiliser la variable globale.

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

Que diriez-vous d'utiliser un événement jQuery personnalisé avec une interface de type montre angulaire;

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

Je sais que c'est un vieux fil, mais j'ai pensé pouvoir ajouter un petit plus. Dans mon cas, je voulais transmettre le texte, val et quelques autres données attr. Dans ce cas, il vaut mieux stocker toute l'option en tant que valeur précédente plutôt que juste la valeur.

Exemple de code ci-dessous:

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

ÉDITER:

J'ai oublié d'ajouter .clone () sur l'élément. à ne pas le faire lorsque vous essayez de retirer les valeurs que vous finissez par extraire la nouvelle copie de la sélection plutôt que la précédente. L'utilisation de la méthode clone () stocke une copie de la sélection au lieu d'une instance de celle-ci.

Eh bien, pourquoi ne stockez-vous pas la valeur sélectionnée actuelle, et lorsque l'élément sélectionné est modifié, vous conserverez l'ancienne valeur? (et vous pouvez le mettre à jour à votre guise)

Utilisez le code suivant, je l'ai testé et son fonctionnement

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

Je voudrais contribuer une autre option pour résoudre ce problème; car les solutions proposées ci-dessus n'ont pas résolu mon scénario.

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

Cela utilise jQuery pour que def. est une dépendance ici, mais cela peut être adapté pour fonctionner en javascript pur. (Ajoutez un écouteur au corps, vérifiez si la cible d'origine était une fonction select, execute, ...).

En attachant l'écouteur de modification au corps, vous pouvez être sûr que cela se déclenchera après des écouteurs spécifiques pour les sélections, sinon la valeur de 'data-previous' sera écrasée avant même que vous ne puissiez la lire.

Cela suppose bien sûr que vous préférez utiliser des écouteurs séparés pour votre valeur précédente et votre valeur de contrôle. Cela correspond parfaitement au modèle de responsabilité unique.

Remarque: Cela ajoute cette fonctionnalité «précédente» à toutes les sélections, veillez donc à affiner les sélecteurs si nécessaire.

Il s'agit d'une amélioration par rapport à la réponse @thisisboris. Il ajoute une valeur actuelle aux données, afin que le code puisse contrôler quand une variable définie sur la valeur actuelle est modifiée.

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

Meilleure solution:

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

Il existe plusieurs façons d'atteindre le résultat souhaité, c'est ma façon humble de le faire:

Laissez l'élément conserver sa valeur précédente, alors ajoutez un attribut 'previousValue'.

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

Une fois initialisé, «previousValue» pouvait désormais être utilisé comme attribut. Dans JS, pour accéder à la valeur précédente de cette sélection:

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

Une fois que vous avez terminé d'utiliser «previousValue», mettez à jour l'attribut à sa valeur actuelle.

Je devais révéler un div différent en fonction de la sélection

Voici comment vous pouvez le faire avec la syntaxe jquery et 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()
        }
    })
})