CODEWITHSUNDEEP
javascriptjqueryformsevents
GordonM
GordonM

Reputation: 31740

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

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.

Upvotes: 45

Views: 58216

Answers (10)

Pavel Bariev
Pavel Bariev

Reputation: 2626

Some good answers here. But still I had to make some additions.

$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
    e.preventDefault();
})

Upvotes: 2

RoToRa
RoToRa

Reputation: 38420

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 appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:

Upvotes: 3

Federico Morán
Federico Morán

Reputation: 33

A simple solution based on CSS is this small fragment:

select:read-only * {
    display: none;
}

This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.

Upvotes: -3

Allenph
Allenph

Reputation: 2015

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

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

JsFiddle

Upvotes: 53

Sebas
Sebas

Reputation: 21532

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:

function cancelDropDown(ev) {
  ev.preventDefault();
}

document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Upvotes: 3

Deniz Ozger
Deniz Ozger

Reputation: 2623

This should work:-

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

Upvotes: 86

Rohitesh
Rohitesh

Reputation: 987

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.

<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>

<!-- The JS function -->
<script>
    function tackleDropdown(){
        document.getElementById('select').setAttribute('size', 0);

        // your code for displaying the jQuery UI dialog (is it colorbox???)

        // re-enabling the drop down
        document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
    }
</script>

Upvotes: 1

Simon
Simon

Reputation: 23141

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

Upvotes: 5

Nate Barr
Nate Barr

Reputation: 4660

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.

$(document).ready(function() {
    $('#idOfSelect option').css('display', 'none');
});

Updated Solution:

$(document).ready(function() {
    $('#idOfSelect').focusin(function() {
        $(this).css('display', 'none');
        $('body').click(function(event) {
            $(this).unbind(event);
            $('#idOfSelect').css('display', 'block');
        });
    });
});

Upvotes: 1

Gowri
Gowri

Reputation: 16835

Use disabled

$(this).attr("disabled","disabled");

Upvotes: 0

Related Questions