CODEWITHSUNDEEP
jqueryhtmlfirefoxoperahtml-select
Martijn
Martijn

Reputation: 3754

Prevent select dropdown from opening in Firefox and Opera

In jQuery, you can stop a <select> from opening its dropdown menu by using event.preventDefault in the mousedown handler, allowing you to replace the dropdown with something else while still retaining the original style of the form element.

This works fine in Chrome and MSIE, but in Firefox and Opera the dropdown appears regardless (not tested in Safari).

Example: http://jsfiddle.net/9cmEh/

The select element should look enabled and still respond to all user interaction as if enabled, but the dropdown should not be rendered. Instead the dropdown will be replaced by something custom rendered, such as including color swatches, icons or fonts, but the "custom dropdown" part is already done in my project.

Does anybody know how to make this work in all* browsers?

Upvotes: 3

Views: 8708

Answers (5)

stalin wesley
stalin wesley

Reputation: 165

disable not selected elements (options).

$('select option:not(:selected)').attr("disabled",true);

Upvotes: 0

clenemt
clenemt

Reputation: 793

This is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=392863
It is currently inside firefox ESR32.

If like me you have a hidden <select> under your custom HTML/Javascript select and still want to keep the focus on that hidden <select> (for accessibility, tab navigation, arrow, enter ...).

Simply use z-index: -1.

.hidden-select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

Upvotes: 0

Seb33300
Seb33300

Reputation: 7556

This should works in most case both on click and focus (with tab):

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

Upvotes: 0

adeneo
adeneo

Reputation: 318242

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

FIDDLE

Works in Firefox atleast, but does'nt seem to work in Chrome ?

EDIT

I could'nt come up with a decent way of detecting whether one method works or not, so did some browser sniffing instead. Not really the best way to do it, but the best I could come up with, and it does seem to work in the browsers I've tested :

$(function() {
    $('select').on('focus mousedown', function(e) {
        if ($.browser.webkit||$.browser.msie) {
            e.preventDefault();
        }else{
            this.blur();
            window.focus();
        }
    });
});​

Upvotes: 10

Scott Selby
Scott Selby

Reputation: 9570

thy this 

               //e.stopPropagation works only in Firefox.
                  if (event.stopPropagation) {
                event.stopPropagation();
                event.preventDefault();
                 }

came from here link , This may help on the opera situation , it is slightly different question , but you may be able to get it to work

Upvotes: 1

Related Questions