How do I get the previous value of my AUTO-Generated dropdown menu after an onchange event? Example

<select class="form-control" name="Diabetes_UK_3147" id="Diabetes_UK_3147" onchange="return verifyUpdateResponseGross(this);">
  <option value="Yes">Yes</option>
  <option value="Possibly">Possibly</option>
  <option value="">N/A</option>
</select>

and I have this function

function verifyUpdateResponseGross(val)
{
  var updated_response = val.value;
  var colheader = val.name
  var before_gross = $('#new_gross').val(); 

  $.ajax({
  url: "qa/api/crm/getquestion", 
  type: 'GET',
  data: {'colheader':colheader},
  success: function(result){
    // var costperlead = result;
    // if(updated_response != "")
    // {
    //  var new_gross_amount = parseFloat(before_gross) + parseFloat(costperlead);
    //  $('#new_gross').val(new_gross_amount);
    // }
    // else
    // {
    //  var new_gross_amount = parseFloat(before_gross) - parseFloat(costperlead);
    //  $('#new_gross').val(new_gross_amount);
    // }
    // console.log(costperlead);
   }});
}

The reason I want to get the previous value is I need a checking that if the dropdown value is empty (N/A) then I need to perform some operation and if the value is not empty then I need perform another operation, But when the value gis not empty but the same from the previous value, then do nothing.

Those operation are those in ments. Thanks

UPDATE The id and name is autogenerated. That's why I have a

onchange="return verifyUpdateResponseGross(this);"

This will handle the change and do necessary operation.

This is it is autogenerated

How do I get the previous value of my AUTO-Generated dropdown menu after an onchange event? Example

<select class="form-control" name="Diabetes_UK_3147" id="Diabetes_UK_3147" onchange="return verifyUpdateResponseGross(this);">
  <option value="Yes">Yes</option>
  <option value="Possibly">Possibly</option>
  <option value="">N/A</option>
</select>

and I have this function

function verifyUpdateResponseGross(val)
{
  var updated_response = val.value;
  var colheader = val.name
  var before_gross = $('#new_gross').val(); 

  $.ajax({
  url: "qa/api/crm/getquestion", 
  type: 'GET',
  data: {'colheader':colheader},
  success: function(result){
    // var costperlead = result;
    // if(updated_response != "")
    // {
    //  var new_gross_amount = parseFloat(before_gross) + parseFloat(costperlead);
    //  $('#new_gross').val(new_gross_amount);
    // }
    // else
    // {
    //  var new_gross_amount = parseFloat(before_gross) - parseFloat(costperlead);
    //  $('#new_gross').val(new_gross_amount);
    // }
    // console.log(costperlead);
   }});
}

The reason I want to get the previous value is I need a checking that if the dropdown value is empty (N/A) then I need to perform some operation and if the value is not empty then I need perform another operation, But when the value gis not empty but the same from the previous value, then do nothing.

Those operation are those in ments. Thanks

UPDATE The id and name is autogenerated. That's why I have a

onchange="return verifyUpdateResponseGross(this);"

This will handle the change and do necessary operation.

This is it is autogenerated

• javascript
• jquery
• dropdown

• How you are generating the menu? And which value got selected when page loads? – Deepak Biswal Commented Sep 23, 2015 at 11:23
• Store the previous value in a var and update it on every change. – lshettyl Commented Sep 23, 2015 at 11:27

4 Answers 4

Best way to do it by jquery :

  $(document).ready(function(){
        var previous;
         $("#Diabetes_UK_3147").on("focus click",function () {
            previous = this.value; // Old vaue 

        }).change(function() {
        var value =  this.value; // New Value
          $('span').text('Old Value : '+previous+' New Value : '+value)
        });

    })

here the fiddle http://jsfiddle/Laa2hL3b/

Edited : in auto-Generated dropdown you can add a custom class for example "myselectbox"

<select class="form-control  myselectbox"

and make change here

  $(".myselectbox").on(/* other code remain same */

Use data to store the data instead a global variable:

$("#Diabetes_UK_3147").on("focus",function(){  
     $(this).data('previous',$(this).val());
}

Then you can access previous value by $("#Diabetes_UK_3147").data('previous');

jQuery data

Use data-* as below. Also, remove the inline event handler onchange="return verifyUpdateResponseGross(this);" and do it the unobtrusive way.

var $select = $("#Diabetes_UK_3147");
$select.data("previous-val", $select.val());

$select.on("change", function() {

    var current_value = $(this).val();

    if (current_value == "") {
        //Do stuff when empty   
    } else if ( current_value != $(this).data("previousVal") && current_value != "" ) {
        //Do stuff when not empty and current value != previous value
    }
});

var $select = $("#my-select");

$select.data("prevVal", $select.val()).data("currVal", $select.val()).on("change", function () {
    var $this = $(this);
    $this.data("prevVal", $this.data("currVal")).data("currVal", $this.val());

    // do your staff here. Previous value is available in $this.data("prevVal")
});