Question

I want to click a <select> but stop it to show his dropdown list

$('select').click(function(){
    if ($(this).find('option').size() > 20) {
        // some code to do my job
        return false;
    }
});

The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.

I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.

Is this possible? … and Thanks!

---

Long story is here (if you have interested in why I want to do that):

As you know, sometimes there will be a <select> with too many
<option> in it, and when you click it, there will be a long dropdown
list. Find what you need in a long dropdown list is a terrible job…
But unfortunately there is a lot in my site.

So I think the simplest way is to write some javascript to change
that, when option is more than 20, show a dialog with a filter and a
new <select> which only have filtered <option> to let find easy.

And my problem is the dropdown list is still display, make my users
confused… They don’t know where to operate. “the dialog or the
origin select”.

Answer 1

The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you’ll need to bind an event handler to mousedown instead:

$("select").mousedown(function(e) {
    if ($(this).find('option').length > 20) {
        e.preventDefault(); //return false will also work
    }
});

Here’s a working example. Note that I’ve used the preventDefault method of the event object, simply because I think that makes it clearer what’s actually happening. However, return false will work too.