Obtenir la valeur de sélection (menu déroulant) avant le changement

Question

La seule chose que je veux atteindre est à chaque fois que le menu déroulant <select> est modifiée Je veux que la valeur de la liste déroulante avant le changement. J'utilise la version 1.3.2 de jQuery et en utilisant un événement de changement, mais la valeur que je reçois 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>

Permet de dire que l'option actuellement sélectionnée est mon maintenant, quand je change à pile en cas onchange (à savoir quand je l'ai changé la pile) Je veux sa valeur précédente à savoir mon prévu dans ce cas.

Comment cela peut-il être atteint?

Modifier Dans mon cas, j'ai plusieurs boîtes de sélection dans la même page et que vous voulez même chose à appliquer à tous. Aussi tous mes select sont insérés après chargement de la page par ajax.

Answer 1

Combiner Focus événement avec changement événement 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

Answer 2

S'il vous plaît ne pas utiliser une variable globale pour cette - stocker la valeur précédente à données voici un exemple: http://jsbin.com/uqupu3/2/edit

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

juste vu que vous avez beaucoup de sélections à la page - cette approche travaillera également pour vous puisque pour chaque sélection vous stockerez la valeur précédente sur les données de la sélection

Answer 3

Je vais pour la solution de Avi Pinto qui utilise jquery.data()

Utilisation de mise au point n'est pas une solution valable. Il fonctionne à la première fois que vous changez les options, mais si vous restez sur cet élément de sélection et presser la touche « haut » ou « bas ». Il ne passera pas par l'événement de mise au point à nouveau.

Donc, la solution devrait être plus présente comme 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
})

Answer 4

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

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

J'utilise l'événement « en direct », ma solution est fondamentalement similaire avec Dimitar, mais au lieu d'utiliser « focus », ma valeur précédente est enregistrée « clic » est activée.

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

Comment l'utilisation d'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
});

Answer 8

maintenir la chute sélectionnée vers le bas la valeur avec jquery choisie dans une variable globale avant d'écrire vers le bas de baisse « sur le changement » fonction d'action. Si vous souhaitez définir la valeur précédente dans la fonction que 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;
         }
  });
});

Answer 9

Je sais que c'est un vieux fil, mais a pensé que je pourrais ajouter un peu plus. Dans mon cas, je voulais transmettre le texte, val et une autre attr de données. Dans ce cas, le mieux stocker l'option tout comme une valeur précédente plutôt que le val.

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

EDIT:

J'ai oublié de .clone ajouter () sur l'élément. à ne pas faire lorsque vous essayez de retirer les valeurs que vous finissez par tirer dans la nouvelle copie de la sélectionner plutôt que le précédent. En utilisant la méthode clone () stocke une copie de la sélection au lieu d'une instance.

Answer 10

Eh bien, pourquoi ne pas stocker la valeur actuelle sélectionnée et lorsque l'élément sélectionné est modifié, vous aurez l'ancienne valeur stockée? (Et vous pouvez le mettre à jour à nouveau comme vous le souhaitez)

Answer 11

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

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

Answer 12

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

Answer 13

Je voudrais contribuer une autre option pour résoudre ce problème; étant donné que les solutions proposées ci-dessus n'a 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());
        }
      );
    }
)();

utilise-t-jQuery pour que def. est une dépendance, mais cela peut être adapté pour fonctionner en javascript pur. (Ajouter un auditeur au corps, vérifier si l'objectif initial était une sélection, exécuter la fonction, ...).

En fixant l'écouteur de modification du corps, vous pouvez être à peu près sûr que ce feu de volonté après auditeurs spécifiques pour Selects, sinon la valeur des « données précédente » seront remplacés avant de pouvoir même le lire.

Ceci est en supposant bien sûr que vous préférez utiliser écouteurs distincts pour votre installation précédente et l'enregistrement de valeur. Il est en parfaite harmonie avec le modèle unique responsabilité.

Remarque:. Cela ajoute cette fonctionnalité 'précédent' à tous sélectionne, alors assurez-vous d'affiner les sélecteurs si nécessaire

Answer 14

Ceci est une amélioration @thisisboris réponse. Il ajoute une valeur actuelle de données, de sorte que le code peut contrôler quand un ensemble variable à 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() );
        }
    );
})();

Answer 15

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

Answer 16

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

Laissez la cale élément de sa valeur précédente, il faut donc ajouter un attribut « previousValue ».

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

Une fois initialisé, « previousValue » pourrait maintenant être utilisé comme un attribut. En JS, pour accéder au previousValue de cette sélection:

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

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

Answer 17

je devais révéler une autre div basée sur la sélection

Voici comment vous pouvez le faire avec jquery et ES6 syntaxe

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