jquery click (remember OLD VALUE)

While I click on select element, I need to remember old value of the sele开发者_C百科cted element.

This code works in FF,CHROME and OPERA instead of IE.

1. Remember the old value.
2. Choose select option and replace old value remembered with a selected option!

Code:

   $(document).ready(function() {
        $('#viewTableOrders tr td > select').click(function() {
          oldCurrentPath = $(this).val();
          oldId = $(this).attr('title');
          oldCurrentDate = $('#viewTableOrders tr#vagon' + oldId + '> td >input.input_ver1').val();
          dataAjax = {};
       });


        /* event on change path  */
        $('#viewTableOrders tr td > select').change(function() {
            //do something... + old value
        });  
    });

It looks like the problem is that the 2nd click(choosing new option) will fire before the change-event.

Try using focus instead of click:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>Old value is:<span></span>
<script>
$(document).ready(
  function()
  {
    $('select').focus(function()
                      {
                          //store old value
                        $(this).data('oldValue',$(this).val());}
                      );
    $('select').change(function()
                       {
                          //do something
                        $('span').text($(this).data('oldValue'));
                          //trigger focus to set new oldValue
                        $(this).trigger('focus');
                       });

  }
);
</script>

(Example also uses data suggested by prodigitalson)

I would use the data infrastructure for this:

$('#viewTableOrders tr td > select').click(function() {
  var old = {};
  old.currentPath = $(this).val();
  old.id = $(this).attr('title');
  old.currentDate = $('#viewTableOrders tr#vagon' + old.id + '> td >input.input_ver1').val();
  old.ajaxData = {};
  $(this).data('oldData', old);

}).change(function() {
  var oldData = $(this).data('oldData');
  if(typeof old == 'object'){
    // do stuff with oldData
  }      
});

The question is a little old, but I think we also need to look at the key up/down events, otherwise using the cursor to change the select values doesn't cause the old value to get updated. This worked for me, based on @Dr.Molle's code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>Old value is:<span></span>
    <script>
    $(document).ready(
      function()
      {
        $('select').focus(function()
          {
            //store old value
            $(this).data('oldValue',$(this).val());
          });
        $('select').change(function()
            {
              //do something
              $('span').text($(this).data('oldValue'));
              //trigger focus to set new oldValue
              $(this).trigger('focus');
            });
        $('select').keydown(function()
            {
            //store old value
            $(this).data('oldValue',$(this).val());
            });
        $('select').keydown(function()
            {
              //do something
              $('span').text($(this).data('oldValue'));
              //trigger focus to set new oldValue
              $(this).trigger('focus');
            });

      }
    );
    </script>