如果已通过“选择”框的更改事件“选择”或“取消选择”一个选项，则查找

Question

I have a html multi-select select box. When i select/de-select values in a change event is fired on it.

Whats the best way to know from the event that the event is because of an element being selected or deselected? I don't want its value, just whether the change event is because of 'selection' or 'de-selection'.

Answer 1

Making a few assumptions here, you have a multi-select and you just need to know if there has been a selection or not.

Then, you just need to check the length of selected options with a cached value.

See this fiddle: http://jsfiddle.net/2uudx/1/

Not the most elegant or optimized way, but a direction.

var sel = 0;
$('#mySelect').on("change", function() {
    var newsel = $(this).find(":selected").length;
    if (newsel > sel) {
        // selected
    } else {
        if (newsel < sel) {
            // de-selected
        } else {
            // no-change
        }
    }
    sel = newsel;
});

If you really need to compare the values which were selected or de-selected, then instead of caching the length, you cache the selected values in an array. On change , compare the currently selected values to the cached array.

Hope that gives a suitable pointer.

Update :

Using values to compare more accurately, as mentioned above by way of arrays.

Here is a sample fiddle: http://jsfiddle.net/u9XE4/3/

var sel = [];
$('#s1').on("change", function() {
    var newsel = $(this).val();
    var same = compareArray(newsel, sel);
    if (same) {
        // no-change
    } else {
        if ((!same) && ((newsel.length == sel.length) || (newsel.length < sel.length))) {
            // de-selected
        } else {
            // selected
        }
    }
    sel = newsel;
});

function compareArray(a, b) {
    $.each( a, function( key, value ) {
        var index = $.inArray( value, b );
        if( index != -1 ) {
            return true;
        }
    });
    return false;
}

hope that helps.