The mousedown event on options in select does not work in IE, is there any workaround?

Question

This next piece of code is to avoid the need to use ctrl-click in the select box

but it does not work in IE 8.

Is there any work to achieve the same level in IE and another version of IE?

$('option').mousedown(function(e) { e.preventDefault(); $(this).prop('selected', !$(this).prop('selected')); return false; }); 

Answer 1

I don't think there is a way to get a mousedown or click event in an option element in IE8.

If you really want to describe the behavior, I suggest you use a different control, rather than multiple select . Changing the behavior of standard user interface components is usually not a good idea, as users are accustomed to behaving in a certain way and getting confused when they behave differently in some applications / pages than in others. If you need a list with a simple click of the mouse, step-by-step behavior, it is much better to do something your own.

You can do this with a few select , but the user interface 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, this is a really ugly user interface.

---

Here is an example of a pseudo-selection: 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:

 <div class="pseudo-select"> <div class="pseudo-option" data-value="1">One</div> <div class="pseudo-option" data-value="2">Two</div> <div class="pseudo-option" data-value="3">Three</div> <div class="pseudo-option" data-value="4">Four</div> <div class="pseudo-option" data-value="5">Five</div> <div class="pseudo-option" data-value="6">Six</div> <div class="pseudo-option" data-value="7">Seven</div> <div class="pseudo-option" data-value="8">Eight</div> <div class="pseudo-option" data-value="9">Nine</div> </div> 

JavaScript using jQuery:

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

This is what I dropped in a couple of minutes, obviously, a lot of room for improvement, but you get the point.

Note If you use something like this, you will need to detect mobile browsers and browsers using assisstive technologies (screen readers, etc.) and use regular select instead (how the browser will work better with the user in these situations .).

Answer 2

I found one serious problem with jQuery answer above. .val() $(select) will not be updated.

Here is a working solution:

 $select.mousedown(function (e) { e.preventDefault(); const select = this; const { scrollTop } = select; e.target.selected = !e.target.selected; setTimeout(function () { select.scrollTop = scrollTop; }, 0); }).mousemove(function (e) { e.preventDefault(); });