How to get the previous selected value from a dropdown before onchange

I know its the easiest question but cant get the correct 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 How Can I get the previous Selected Value from my select box

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

5 thoughts on “How to get the previous selected value from a dropdown before onchange”

  1. You could include a hidden input field on your page

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

    Then in your script you could access as any other input:

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

    Set it after an onchange event occurs:

    $('#statustab_{{ $row['placementkey'] }}').addEventListener('change', function (e) {
        $('$previous_value').val(e.value)
    }) 
    
    Reply
  2. Save the original value using data() when the element gets focus:

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

    And then get the saved 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);
    }
    
    Reply
  3. Try below code. Hope it will help 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>
    Reply
    1. Use the data-* to store the old value
    2. Get the data-* as the old value and the selected option as 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>
    Reply
  4. Combine the focus event with the change event to achieve what you want:

    Try 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 something 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 which is selected.

    Hope this helps you!

    Reply

Leave a Comment