How to get the previous selected value from the drop-down list before online exchange

Question

I know his easiest question, but can't get the right answer

<div class="col-12 col-md-4 col-lg-5 mt10-xs"> <p>Status</p> <div class="form-group FL mr20 w100-xs"> <div class="rsi-custom-select"> <select class="form-control" id="statustab_{{ $row['placementkey'] }}" class="select2-selecting" onchange="listingByStatus(this,'{{ $row['placementkey'] }}')"> @foreach($placementStatus as $pl) <option @if($pl['placement_status_id'] == $row['statusid'] ) selected @endif value="{{$pl['placement_status_key']}}">{{$pl['placement_status']}}</option> @endforeach </select> </div> </div> </div> 

This is my onchange function. In this section "How to get the previous selected value from my selection window"

 function listingByStatus(ths,key){ var thisSelect = $('#statustab_'+key).text(); var statusText = $( "#statustab_"+key+" option:selected" ).text(); var currentval = $( "#statustab_"+key+" option:selected" ).val(); } 

Answer 1

Save the original value with data() when the element receives focus:

 $('.select2-selecting').on('focusin', function(){ console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }); 

And then get the stored old value in your onchange function:

 function listingByStatus(ths,key){ var thisSelect = $('#statustab_'+key).text(); var statusText = $( "#statustab_"+key+" option:selected" ).text(); var currentval = $( "#statustab_"+key+" option:selected" ).val(); var prev = $('.select2-selecting').data('val'); //old value console.log("Old value " + prev); } 

Answer 2

You can specify a hidden input field on your page

 <input type="hidden" id="previous_value" name"previous_value" value="abc"/> 

Then in your script you can access like any other input:

 var previous = $('#previous_value').val(); 

Install it after the onchange event:

 $('#statustab_{{ $row['placementkey'] }}').addEventListener('change', function (e) { $('$previous_value').val(e.value) }) 

Answer 3

• Use data-* to store the old value
• Get data-* as the old value, and the selected parameter as the new value

 $('select').change(function(){ var oldvar = $(this).attr('data-old') !== typeof undefined? $(this).attr('data-old') :""; var newval = $("option:selected",this).text(); $(this).attr('data-old',newval) console.log("prev value :" + oldvar) console.log("curr value :" + newval) }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>1</option> <option>2</option> <option>3</option> </select> 

Answer 4

Combine the focus event with the change event to achieve what you want:

Try it like this:

 (function () { var previous; $("select[name=test]").focus(function () { // Store the current value on focus, before it changes previous = this.value; }).change(function() { // Do soomething with the previous value after the change document.getElementById("oldData").innerHTML = "<b>Previous: </b>"+previous; previous = this.value; }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <select name="test"> <option value="one">one</option> <option value="two">two</option> <option value="three">three</option> <option value="four">four</option> </select> <div id="oldData"></div> 

This will give you the last value that is selected.

Hope this helps you!

Answer 5

Try entering the code below. Hope this helps you.

 $('select').change(function(){ var oldval = $(this).prop('data-old') !== undefined ? $(this).prop('data-old') : ""; var newval = $("option:selected",this).text(); console.log("previous value : " + oldval); console.log("current value : " + newval); $(this).prop('data-old',newval); }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>Apple</option> <option>Mango</option> <option>Banana</option> <option>Orange</option> </select>