web-dev-qa-db-de.com

Wert der Auswahl (Dropdown) vor der Änderung abrufen

Die Sache, die ich erreichen möchte, ist, wenn der <select>-Dropdown geändert wird. Ich möchte den Wert des Dropdowns vor der Änderung. Ich verwende die Version 1.3.2 von jquery und das Ereignis on change, aber der Wert, den ich dort bekomme, ist nach der Änderung.

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

Nehmen wir an, die Option My ist jetzt ausgewählt, wenn ich sie im onchange-Ereignis in Stack wechsele (dh wenn ich sie in Stack geändert habe).

Wie kann das erreicht werden?

Bearbeiten: In meinem Fall habe ich mehrere Auswahlfelder auf derselben Seite und möchte, dass auf alle dasselbe angewendet wird. Auch alle meine select werden nach dem Laden der Seite durch Ajax eingefügt.

205
Alpesh

Kombinieren Sie das Ereignis focus mit dem Ereignis change, um das zu erreichen, was Sie möchten:

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

Arbeitsbeispiel: http://jsfiddle.net/x5PKf/766

394
Andy E

bitte verwenden Sie hierfür keine globale Variable. Speichern Sie den vorherigen Wert in den Daten Hier ist ein Beispiel: http://jsbin.com/uqupu3/2/edit

der Code für 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());
  });
});

ich habe gerade gesehen, dass Sie viele Auswahlmöglichkeiten auf der Seite haben - dieser Ansatz wird auch für Sie funktionieren, da Sie für jede Auswahl den vorherigen Wert in den Daten der Auswahl speichern

126
Avi Pinto

Ich gehe für die Lösung von Avi Pinto, die jquery.data() verwendet.

Die Verwendung von Fokus ist keine gültige Lösung. Es funktioniert beim ersten Mal, wenn Sie die Optionen ändern, aber wenn Sie auf diesem Element bleiben, wählen Sie die Option "Nach oben" oder "Nach unten". Das Fokusereignis wird nicht mehr durchlaufen.

Die Lösung sollte also wie folgt aussehen: 

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

Verfolgen Sie den Wert von Hand.

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;
  });
});
8
August Lilleaas
 $("#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());
});
6
free4ride

Ich verwende das Ereignis "live", meine Lösung ist mit Dimitar im Grunde ähnlich, aber anstatt "focus" zu verwenden, wird mein vorheriger Wert gespeichert, wenn "click" ausgelöst wird. 

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

Ich weiß, dass dies ein alter Thread ist, aber ich dachte, ich könnte noch etwas hinzufügen. In meinem Fall wollte ich den Text, val und einige andere Daten weitergeben. In diesem Fall ist es besser, die gesamte Option als vorherigen Wert und nicht nur als Wert zu speichern.

Beispielcode unten:

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

BEARBEITEN:

Ich habe vergessen, .clone () dem Element hinzuzufügen. Wenn Sie dies nicht tun, wenn Sie versuchen, die Werte zurück zu ziehen, ziehen Sie am Ende die neue Kopie der Auswahl und nicht die vorherige. Bei Verwendung der clone () -Methode wird eine Kopie der Auswahl statt einer Instanz davon gespeichert.

1
JBW

behalten Sie den aktuell ausgewählten Dropdown-Wert mit der ausgewählten Jquery in einer globalen Variablen bei, bevor Sie die Dropdown-Aktionsfunktion "Bei Änderung" schreiben. Wenn Sie den vorherigen Wert in der Funktion festlegen möchten, können Sie die globale Variable verwenden.

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

Wie wäre es, wenn Sie ein benutzerdefiniertes jQuery-Ereignis mit einer Winkelschnittstellenschnittstelle verwenden?

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

Warum speichern Sie nicht den aktuell ausgewählten Wert, und wenn das ausgewählte Element geändert wird, wird der alte Wert gespeichert. (und Sie können es nach Ihren Wünschen erneut aktualisieren)

0
Soufiane Hassou
(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();
})();
0
Bilal

Verwenden Sie folgenden Code, ich habe es getestet und funktioniert

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;
            }
});
0
Er.KT

Ich möchte eine weitere Option zur Lösung dieses Problems beitragen. da die oben vorgeschlagenen Lösungen mein Szenario nicht gelöst haben.

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

Dies verwendet jQuery, so dass def. ist eine Abhängigkeit hier, aber dies kann angepasst werden, um in reinem Javascript zu arbeiten. (Fügen Sie dem Body einen Listener hinzu, prüfen Sie, ob das ursprüngliche Ziel eine select-Funktion war, eine Funktion ausführen, ...).

Wenn Sie den Änderungslistener an den Körper anschließen, können Sie ziemlich sicher sein, dass after bestimmte Listener für die Selects auslösen, ansonsten wird der Wert von 'data-previous' überschrieben, bevor Sie ihn überhaupt lesen können.

Dies setzt natürlich voraus, dass Sie es vorziehen, getrennte Listener für Ihren Set-Previous- und Check-Value zu verwenden. Es passt genau in das Muster der Einzelverantwortung.

Hinweis: Dies fügt diese Option zu all select hinzu, stellen Sie also sicher, dass Sie die Selektoren bei Bedarf fein abstimmen.

0
thisisboris

Es gibt mehrere Wege, um Ihr gewünschtes Ergebnis zu erreichen, dies ist meine bescheidene Art, es zu tun:

Wenn das Element den vorherigen Wert beibehalten soll, fügen Sie ein Attribut "previousValue" hinzu.

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

Nach der Initialisierung kann 'previousValue' jetzt als Attribut verwendet werden. Um in JS auf den vorherigen Wert dieser Auswahl zuzugreifen:

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

Wenn Sie mit 'previousValue' fertig sind, aktualisieren Sie das Attribut auf den aktuellen Wert.

0
Rishi Alluri

Beste Lösung:

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

Dies ist eine Verbesserung der Antwort von @thisisboris. Es fügt den Daten einen aktuellen Wert hinzu, sodass der Code steuern kann, wann eine auf den aktuellen Wert gesetzte Variable geändert wird. 

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

Ich musste einen anderen Div basierend auf der Auswahl aufdecken

So geht das mit jquery und es6-Syntax

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()
        }
    })
})
0
Dieter Gribnitz