While I click on select element, I need to remember old value of the selected 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
        });  
    });

While I click on select element, I need to remember old value of the selected 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
        });  
    });

• javascript
• jquery

3 Answers 3

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>