Unselect on normal click - IE doesn't work

Question

I have a bunch of elements that needs to be able to unselect on click (without CTRL+Click, because users are dumb and won't figure it out without intensive training, lol)

I have the following code, works brilliantly in Chrome/Firefox, not in IE 11 (don't have earlier versions to test on yet):

$('[id^=sel_]').on('mousedown', 'option', function(e){
    e.preventDefault();

    if ($(this).is(':selected')) {
        $(this).prop("selected", false);
    } else {
        $(this).prop("selected", true);
    }

    $(this).change();

    return false;
});

As you can see it's pretty simple, everything with an ID that starts with "sel_" should get a "mousedown" event on their options. If the option is selected, unselect. If the option is not selected, select.

I've tried "mouseup" and different iterations of the same function. IE entirely ignores it for some reason. I've read elsewhere on Stack (for checkboxes) that it doesn't work in IE, but jQuery's documenation states it does work for all versions of IE that they support.

Any help would be highly appreciated.

jsfiddle: http://jsfiddle.net/576A5/

Answer 1

I'm sorry but, the issue depends of specific implementation of select element native to each browser. IE handles it in a different way and it's making your workaround broke.

I think a solution can be to implement your own custom select control or use a ready plugin for that (like chosen ).

Using a stable plugin will help you to handle mobile devices/tablets, that with a custom control need particolar attention.

Answer 2

1) Use $('[id^="sel_"]')

2) Use .attr("selected", true); (instead of prop)

3) Ommit the 'option' parameter in the event binding

Note: is the mouse event fired at all? (use console.log)