CODEWITHSUNDEEP
htmlselect
hookedonwinter
hookedonwinter

Reputation: 12666

Why won't this select open up?

I have a very simple select drop down. In Chrome, it doesn't drop down. The code itself works fine, and the drop down works in Safari, but for some reason it won't open in Chrome. Here is the HTML:

<select name="pellet_credit" class="item_discount">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

It should be pretty simple. It's a dropdown... Here's a screenshot of the select, selected, but not open: alt text

--- edit ---

This is a jsfiddle with the full source included. The dropdown works for me in the jsfiddle view, but not on the actual site.

http://jsfiddle.net/HSYvf/

--- edit ---

Other drop downs on the page work fine.

Upvotes: 5

Views: 29426

Answers (10)

Shayan
Shayan

Reputation: 21

For anyone else here reading different situations, mine didn't open-up the select options because I had a class on the select element which applied a style like this:

.class:readonly {
   pointer-events: none;
}

So I had to override it with pointer-events: auto !important; to fix the problem.

Upvotes: 0

Lone Ronin
Lone Ronin

Reputation: 2870

To debug such issues try removing all attributes from the html and add them one at a time to find out what is causing the issue. For example, the snippet below does not work as needed. 

<select size="10">
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>

Removing the size attribute fixes it

<select >
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>

Upvotes: 1

Mr. de Silva
Mr. de Silva

Reputation: 382

We had a crazy problem when we were developing a client/server programming language which had a listbox. Although INPUT worked the listbox didn't. We have mouse tracking on it and by a bug the $(window).mousedown... was being enabled by default.

We were able to track the problem with this page: https://hackernoon.com/finding-that-pesky-listener-thats-hijacking-your-event-javascript-b590593f2a83

Just in case the above page disappears:

In Chrome (possibly other Chromium flavours [works on Opera too]):

  1. Right click on element.
  2. Click 'Inspect...'
  3. When the 'Elements' are shown, the right panel will have [Styles][Computed][Event Listeners] (tabs). Click on 'Event Listeners'.
  4. Look for 'mouseup', 'mousedown', 'keyup', etc and expand what you suspect and remove it to see if that fixes the problem (debug).
  5. Change the code.

What we did was change the 'return false' to 'return true' in our code.

Upvotes: 2

Eleanor Zimmermann
Eleanor Zimmermann

Reputation: 432

The problem for me was that I had included class names in the id declaration.

For future audience, notice in particular if your select element is inconsistent with the surrounding form styles. This is a likely clue that a class isn't being applied correctly, and you may have accidentally placed it in the wrong spot.

Upvotes: 0

Lane
Lane

Reputation: 2719

This happened to me when I put a <select> inside a jQuery .sortable() element. I copied this code right off the jQuery website, and the .disableSelection() method call killed my <select>.

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

Once I removed the .disableSelection(); (which oddly enough they've deprecated...) everything worked just fine.

Upvotes: 3

Jhayes2118
Jhayes2118

Reputation: 842

what ended up happening to me that caused me to be on this page is that display was set to display:none; on the option elements

solution:

$(yourdropdown).children().show();

Upvotes: 1

M Katz
M Katz

Reputation: 5426

I'm adding an answer just to call out the comment by @Agos in the selected answer. Check if you have event handling code (mousedown, click, etc.) that might be stealing the events from the dropdown.

Upvotes: 0

Nikos M.
Nikos M.

Reputation: 61

I had the same problem with Firefox and Chrome and due to the z-index of the form being -1.

When changed the z-index, it worked fine.

Upvotes: 5

Nealv
Nealv

Reputation: 6884

I think you should set a value for your options

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

you can read more here

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186562

Validate your HTML to make sure there aren't extraneous closing/end tags. Make sure you aren't hiding the options through CSS as well.

Upvotes: 8

Related Questions