mousedown event on options in select is not working in IE, Is there any workaround?

Question

This following code snippet is to avoid the need for ctrl-click in a multi-select box

but it does not work in IE 8 .

Is there any work around to achive the same

Answer 1

I don't believe there's any way to get the mousedown or click event on an option element in IE8.

If you really want the behavior you describe, I suggest that you use a different control, rather than a multiple select box. Changing the behavior of standard UI components is usually not a good idea, as users are used to them behaving a certain way and get confused when they behave differently in some apps/pages than they do in others. If you want a list with simple click-on, click-off behavior, much better to do something completely your own.

You can do this with a multiple select, but the user experience is really ugly:

var selected = {};
$('#yourSelectBox').click(function(e) {
    var $this = $(this),
        options = this.options,
        option,
        value,
        n;

    // Find out what option was just added
    value = $this.val();

    // Re-apply the selections
    for (n = 0; n < options.length; ++n) {
        option = options[n];
        if (option.value == value) {
            // The one being updated
            selected[value] = !selected[value];
        }

        // One of the others
        option.selected = !!selected[option.value];
    }

    return false;
});

Live Example | Source

Again, though, that's a really ugly user experience.

---

Here's an example of a pseudo-select instead: Live Example | Source

CSS:

.pseudo-select {
    border: 1px solid black;
    width: 200px;
}
.pseudo-option {
    cursor: pointer;
    border: 1px solid #eee;
}
.pseudo-option.selected {
    background-color: #33c;
    color: white;
}

HTML:

    
One
    
Two
    
Three
    
Four
    
Five
    
Six
    
Seven
    
Eight
    
Nine

JavaScript using jQuery:

$(".pseudo-option").click(function() {
    $(this).toggleClass("selected");
});

That's just something I dashed off in a couple of minutes, obviously plenty of room for improvement, but you get the idea.

Note: If you use something like this, you'll want to detect mobile browsers and browsers using assisstive technologies (screen readers, etc.) and use a normal select instead (as the browser will do a better job of working with the user in those situations.).