Preventing select menu from opening

Question

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; }); 

and

$('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.

Answer 1

This should work:-

$('#select').on('mousedown', function(e) {    e.preventDefault();    this.blur();    window.focus(); }); 

Answer 2

The problem is that you're using the wrong event.

<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">   <option>Some Option</option> </select> 

JsFiddle