On change event '$(this).val()' display previous value

$(function() {
    $("#option_group").bsmSelect({
        //plugins: [$.bsmSelect.plugins.sortable()] 
        listType: 'ul',
        removeLabel: '',
        containerClass: '',
        selectClass: 'form-control',
        optionDisabledClass: '',
        listClass: 'list-inline',
        listItemClass: 'nicListItem',
        listItemLabelClass: '',
        removeClass: 'nicListItemRemove',
        highlightClass: ''
    });
    
    $('#block-product').on('change', '#option_group', function() {
        var test = $(this).val();
        alert(test);
    });
});

On change event '$(this).val()' display previous value, not the last value.

Hi,

I can confirm this - I also enabled debug mode to see what happens for a multi-select. The multi-select is always 1 value behind (first select is NULL), but in the debug box, everything looks fine.

Any chance that this will be fixed or at least a hint where the issue could be?

Thanks

Have you tried to use the value from the event object ?

bsmSelect/js/jquery.bsmselect.js

Line 296 in db365a1

this.$original.trigger(event, [{

Hi vicb and thanks for the quick reply!

I'm not that much into JavaScript and have never used functions as a property of an object so far.

At the moment I'm using onchange="debug(this)" in the select and the function is ...

function debug(selection) {
  var str = $(selection).serialize();
  document.forms[0].elements[0].value = str;
}

... so it simply fills a text field with the selected values for checking - and this way I get the behavior as described above.

Can you maybe assist me a little bit and tell me what I should hand over to the debug function instead of "this" to get it working?

Thanks!

Something like

    $('#block-product').on('change', '#option_group', function(event, obj) {
        alert(obj.value);
    });

Hi Victor,

thanks for pointing to the right direction, I checked jquery documentation - what's the function of the on() method and so on.

I only managed to get it working like this:

$('#gsu').on('change', function(event, obj) {
  alert(obj.value);
});

My select looks like:

<select id="gsu" multiple="multiple">
  <optgroup label="grp1">
    <option value="1-1">1</option>
    <option value="1-2">2</option>
  </optgroup>
  <optgroup label="grp2">
    <option value="2-1">1</option>
    <option value="2-2">2</option>
  </optgroup>
</select>

What I get when I select something is the alert with the value I've just selected. When I try to use a childSelector (like described here http://www.w3schools.com/jquery/event_on.asp), it doesn't work anymore.

Additionally I've saw here (http://www.w3schools.com/jquery/jquery_ref_selectors.asp) that there is a $(":selected") selector - but I didn't figure out how to use it to show all currently selected values on a change event :-/

Is there also a way to get the full string of currently selected values or only the option I just selected?

Ok, got it "solved" like this (with the select from my last posting unchanged) ;-)

    var bsmvalues = '';
    $('#gsu').on('change', function(event, obj) {
        var separator = '_';
        var newvalue = separator + obj.value;
        var n = bsmvalues.search(newvalue);
        if(n >= 0) {
            bsmvalues = bsmvalues.replace(newvalue, '');        
        } else {
            bsmvalues = bsmvalues + newvalue;       
        }
        somefunction(bsmvalues);
    });

Works so far. Thank you very much for your help!

@hurt09 no problem and thanks for reporting the solution.

I ran into similar behavior that wasn't expected. In the handler of the change event, the val() result is the selected values prior to bsmSelect adding/removing the chosen option. Typically the change event is based on the data after it has been changed, not prior. Similar @hurt09 , I had to compare the select's value against the value passed to the event handler:

// add handler to Centers dropdown (on Department model) for updating the AgentPicker
// whenever the Center selection changes
$("select#centers", $container.closest(".modal-body"))
    .off("change.agentPicker")
    .on("change.agentPicker", function (evt, obj) {

    var $select = $(this),

        // all the AgentPickers for this container
        $pickers = $(".agent-picker", $container),

        values = $select.val() || [];

    // add/remove the item to the list of previous values
    switch (obj.type) {
        case "add":
            values.push(obj.value);
            break;

        case "drop":
            values.splice($.inArray(values, obj.value), 1);
            break;  
    }

    ...
});

That probably was a bad design decision (can't remember if it originates from asmSelect or was initiated by me). However it is too late to introduce a BC break now.

Agreed. I just wanted contribute my solution as well for others that may run into this.