Bootstrap-select: How to get the previous/old value on the "change"/"changed.bs.select" event?

Created on 2 Jun 2016 · 10Comments · Source: snapappointments/bootstrap-select

Hello,

I have a problem getting the previous/old value of the select element on the change (or changed.bs.select) event. What would be the way to do it?

I don't want to use tricks like the following since I have many select elements in one page and I want to use the same event for all of them:

var previous;

$("select").on('focus', function () {
    previous = this.value;
}).change(function() {
    alert(previous);
    previous = this.value;
});

I have tried setting the data attribute with the old value to the select element but for some reason it does not get updated with the jQuery data() function.

Thank you,
Andrius

Source

andrius-senulis

Most helpful comment

Actually, the following trick may work out:

var previous_value;
$(".selectpicker").on('shown.bs.select', function(e) {
        previous_value = $(this).val();
}).change(function() {
    alert(previous_value);
    previous_value = $(this).val();
});

andrius-senulis on 2 Jun 2016

🎉4

All 10 comments

Actually, the following trick may work out:

var previous_value;
$(".selectpicker").on('shown.bs.select', function(e) {
        previous_value = $(this).val();
}).change(function() {
    alert(previous_value);
    previous_value = $(this).val();
});

andrius-senulis on 2 Jun 2016

🎉4

Is there any solution for this yet? I tried @andrius-senulis suggestion above but it's not working for me. I also have multiple select boxes which are dynamically added to the page, and I need to be able to get the old and new values.

I've also tried creating a JS function that would set the previous value and set that to the onfocus attribute of the select, like so:

<select class="selectpicker" onfocus="setPreviousValue(this.value)">
    <option>1</option>
</select>

var previous;

function setPreviousValue(newValue) {
    previous = newValue;
}

The onfocus attribute appears to be ignored. According to the documentation there is a reference to oldValue when the changed.bs.select event is fired but I'm not sure how to access it: https://silviomoreto.github.io/bootstrap-select/options/#events

stimko68 on 18 Nov 2016

Update:

So it looks like you can access the oldValue value like so:

var previous;

$('.selectpicker').on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    previous = oldValue;
});

For whatever reason this still isn't working for me, but that could be an issue on my part. Maybe this will help someone else though.

stimko68 on 18 Nov 2016

Same situation here, I get only boolean values fromnewValue and oldValue. I thought they would contain the content of option[value].

tbruyelle on 5 Dec 2016

👍1

Yes. I am also getting boolean values from newValue and oldValue parameters. Docs forward me to wrong path it seems: https://silviomoreto.github.io/bootstrap-select/options/

yigitozkavci on 8 Dec 2016

Hi guys. Recently I've encountered the same problem and I solved it using "shown.bs.select" event:

var previous_val;
$('[id$="_position_selector"].shown select').on('shown.bs.select', function() {
    previous_val = $(this).val();
}).change(function() {
    //do your action here
});

Hope this helps! ;)

Avlexz on 20 Feb 2017

Hi guys,

As a note, the newValue and oldValues are supposed to return true/false, its the way they want it.

If you like me and show/shown events dont fire (my reason is due to jquery and bootstrap being included more than once **dont ask me, company thing)

I did the following to disable selected options and re-enable them should they not be selected anymore. You can also do something similar to remove and re-add properties.

Great solution:

        $('.selectpicker').on('changed.bs.select', function () {
            // check the old value
            var wasSelected = $(this).attr('data-selected');

            if ( wasSelected != "" ){
               $('.selectpicker').not( $(this) ).find('[value="'+wasSelected+'"]').prop('disabled', false);
            }
            // disable the new value in all select pickers but this one
            $('.selectpicker').not( $(this) ).find('[value="'+$(this).val()+'"]').prop('disabled', true);

            // Save the new value
            $(this).attr( 'data-selected', $(this).val() );

            // Refresh the selectpicker to reflect updates
            $('.selectpicker').selectpicker('refresh');
        });