CODEWITHSUNDEEP
javascriptjquery
Zé Carlos
Zé Carlos

Reputation: 3807

Get value of html select before being changed in change event

When processing "change" event from a html select, i would like to get the last selected value/index.

For ex.

$('#mySelect').live('change', function(event){
       var idx = $(this).prop('selectedIndex');
});

idx keeps the value after change event triggers. I need the value that select had before event trigger.

Upvotes: 0

Views: 4685

Answers (5)

Marwan
Marwan

Reputation: 2402

if i got you right then here is the solution in pure javascript 

function getLastSelected(e)
   {
    var s = e;
    var optionsSelected = [];
    for(var i =0;i<s.options.length;i++)
    {
     if(s.options[i].selected == true)
      {
        optionsSelected[optionsSelected.length] = {Value :  s.options[i].value,Text:s.options[i].text,Index : i};
      }
    }

    var lastSelected =((optionsSelected.length >0)?(optionsSelected[optionsSelected.length - 1]):(null)) ;
    return lastSelected; // or do what you have to do here 
//put it in custom attribute or what ever 
   }

this function parameter is select tag id and return object is contains 3 properties Value,Text,Index

call it on onchange event 

onchange = "getLastSelected(this)"

Regards

Upvotes: 0

Vivek
Vivek

Reputation: 11028

you can try something like this-

var lastSeelctedlist = "";
$('#mySelect').live('change', function(event){
       lastSeelctedlist  = $(this).val();
// you rest of code
});

Upvotes: 0

Niels
Niels

Reputation: 49929

Try something like this if you have multiple selects:

var select = $('#mySelect');
select 
    .data("lastIndex", select[0].selectedIndex)
    .live('change', function(event){
        var idx = this.selectedIndex;
        var prevIdx = $(this).data("lastIndex");

        // Alert prev and new index
        alert(prevIds + " - " + idx);

        // Alert prev value and new value
        alert($(this).find("option").eq(prevIdx) + " - " + $(this).find("option").eq(idx));

        // Set new index as old index
        $(this).data("lastIndex", idx);
    });

Upvotes: 1

James
James

Reputation: 111980

You can keep track of the value using a vairable scoped outside of your event-handling function, like this:

var mySelect = $('#mySelect'),
    previousValue = mySelect.val();

mySelect.live('change', function() {

    alert( mySelect.val() ); // alerts current value
    alert( previousValue ); // alerts previous value

    previousValue = mySelect.val(); // save so it can be referenced next time

});

Upvotes: 0

Silver Light
Silver Light

Reputation: 45952

I would store previous value in different variable and update it manually

// what is the value when <select> was just loaded?
var previous_value = $('#mySelect').prop('selectedIndex');

$('#mySelect').live('change', function(event){
       var idx = $(this).prop('selectedIndex');
       // at this point previous_value has the previous value and idx - current
       // ... do something here ...
       // updating previous_value for the next time
       previous_value = idx;
});

Upvotes: 0

Related Questions