CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-select
Alexander
Alexander

Reputation: 345

bootstrap select event parameters

I am using the bootstrap select plugin (http://silviomoreto.github.io/) and I am handling the change event "changed.bs.select" to capture any selection changes. As per the documentation at https://silviomoreto.github.io/bootstrap-select/options/, " this event fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue. "

I would like to understand what the newValue and oldValue represent exactly. Because it is always the case where the new value is true and the oldValue is false.

Here is a fiddle to illustrate my point.

https://jsfiddle.net/muojdbh9/

HTML

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<div class="res">
Waiting for a change event
</div>

jQuery

$(".selectpicker").on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    $("div.res").html("newValue: " + newValue + "<BR>oldValue: " + oldValue);
});

Upvotes: 5

Views: 5357

Answers (4)

EoghanTadhg
EoghanTadhg

Reputation: 522

This is not an error. It appears that newValue and oldValue do not behave as you may expect. Both newValue and oldValue operate the same way. The boolean values you are seeing refer to the previous and new state of the selected option.

true represented selected and false representing not selected.

If the newly selected option was previously not in it's selected state, it will return like so:

newValue: true and oldValue: false

If the selected option was previously selected, it will return like so:

newValue: false and oldValue: true Because it deselected the element.

This is addressed by caseyjhol here:

https://github.com/silviomoreto/bootstrap-select/issues/1378/#issuecomment-216393099

Upvotes: 3

Pascal
Pascal

Reputation: 2174

If you like to have expected behaviour simply change

that.$element.trigger('changed.bs.select', [clickedIndex, $option.prop('selected'), state]);

to

that.$element.trigger('changed.bs.select', [clickedIndex, $option.prop('value'), prevValue]);

in your bootstrap-select.js

Upvotes: 4

Grant Camilleri
Grant Camilleri

Reputation: 11

I ran into this problem also. Thanks TAGraves for the explanation of what's happening. Ended up using a solution like this:

jQuery

$(".selectpicker").on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    var Value = $(".selectpicker option:selected").val()
});

Upvotes: 1

TAGraves
TAGraves

Reputation: 1409

newValue represents the newly selected option's "selected" property, while oldValue represents the previously selected option's "selected" property. Since the new option will always be selected and the old option will always be unselected, they return true and false respectively. This is probably an error on the part of the developers of bootstrap select - it seems they would have intended to pass either the option elements themselves or the options values, not their "selected" properties.

Upvotes: 2

Related Questions