GordonM GordonM - 2 months ago 8x
Javascript Question

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:

$('select').click (function (e) {
console.log (e);
return false;


$('select').click (function (e) {
e.preventDefault ();
console.log (e);

But neither worked.

What am I doing wrong?

EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.

The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.


I believe the best solution would be to replace the select element with something else to click on (a button or a link).

BTW, you may want to look into the CSS 3 property appearence, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited: