How to select/deselect an input select Multiple at each mouse click? (without Ctrl)

Question

I’m trying to make a script to select several options of a <select multiple> every mouse click. So far so good, I got and follows the code:

var numSelected = 0;
var valSelectedArray = [];

$(document).on('mouseup', '#CentroCusto_new option', function () {
    var valSelected = $(this).val();
    valSelectedArray[numSelected] = valSelected;
    numSelected++;

    for (i = 0; i < numSelected; i++) {
            $("#CentroCusto_new option[value=" + valSelectedArray[i] + "]").prop("selected", true);
    }
});

However, I would like to click on an already selected one to desiccate.

My algorithm is really bad and it gives a 'blink' effect every time I click on a new one option, that is, it shows a just selected at the time of the click to then add the others that were already clicked previously, this also was not cool.

Does anyone have any idea how to increment the option to deselect in my code, or else show a more efficient code?

NOTE: I DO NOT WANT TO USE ANY PLUGIN.

Answer 1

Try this:

$('select#CentroCusto_new option').on('mousedown', function (event) {
    this.selected = !this.selected;
    event.preventDefault();
});

With this, as soon as you press the mouse button (mousedown) above the element, the option Selected receives the opposite of the previous state of the same.

The event.preventDefault() causes the standard action associated with that event not to be triggered/activated.

For example, if the event was about a tag <a href="http://testlink.com">, you would not be directed to a new Url.

In our case, the preventDefault causes the (default) action of unchecking all other entries when you click on an item (without Ctrl) not to be executed. Note that disabling the default action also causes the item to not be automatically selected, so the need for the this.selected = !this.selected;

More information on the preventDefault here.

Proof of concept:

http://jsfiddle.net/RkJS7/2/

Answer 2

John Paul, by default a <select multiple> can have multiple elements selected or deselected using Ctrl + click, and also dragging the mouse click.