Work Around For Onclick Event Of Option Tag

I have a multi-select drop-down on my web page and a checkbox to allow user to select all items in the list. &

Solution 1:

One way to do it is using an array to keep record what been selected/deselected, and rebuild your options everytime user click.

js:

var record = [];

var selectAllItems = function (target) {
    //toggle all options here and keep a record in "record" array ...
}

var doTheMagic = function(target){
    record[target.selectedIndex] = ! record[target.selectedIndex];
    rebuildOptions();

}

var rebuildOptions = function (){
    var itemsList = document.getElementById('itemsList');
    for (var i=0;i<record.length;i++){
            itemsList.options[i].selected = record[i];
    }

}

html:

<select id="itemsList" multiple="true" size="3"  onclick="doTheMagic(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
</select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems(this)" />Select all

jsFiddle demo: http://jsfiddle.net/3A9Xs/3/

Solution 2:

This snippet uses onclick, and should work for older IEs too.

In IEs selectedIndex always returns the first found selected index of the select instead of user selected index. A fix is to cache the current value of the select, which at the beginning of the function is the actually selected value. IE changes that value during the iteration, that's why caching is needed.

var select = document.getElementById('select'),
    toggle = document.getElementById('toggle'),
    options = select.options,
    selections = [],
    selectOption = function (e) {
        var n,
            target = e.target || e.srcElement,
            currentValue = target.value;
        for (n = 0; n < options.length; n++) {
            if (currentValue === options[n].value) { // or options[n].text, if values are not defined
                selections[n] = !selections[n];
            }
            options[n].selected = selections[n];
        }
    },
    toggleAll = function () {
        var n, bool = this.checked;
        for (n = 0; n < options.length; n++) {
            options[n].selected = bool;
            selections[n] = bool;
        }
    },
    n;
for (n = 0; n < options.length; n++) {
    selections.push(options[n].selected);
}
if (select.addEventListener) {
    select.addEventListener('click', selectOption);
    toggle.addEventListener('click', toggleAll);
} else {
    select.attachEvent('onclick', selectOption);
    toggle.attachEvent('onclick', toggleAll);
}

A live demo at jsFiddle.