Getting the height of an option element?

Question

As usual, option elements are shown when a select element is clicked and I'd like to get the height of the option elements.

Edit:

<select>
    <option>a</option>
    <option>s</option>
</select>

Answer 1

That's not possible, as it's actually not the option elements that are shown.

The HTML standard only specifies that the browser should provide some way of choosing from the options, not how that should be displayed. Therefore there is no standard way of getting any information about how it's displayed.

Regular browsers show the options as some kind of dropdown list, but other browsers may show it in a completely different way. Some mobile phone browsers for example shows a popup that covers the entire screen.

Answer 2

I believe this is what you want

$(document).ready(function () {
  $("#mySelect").change(function () {
    alert($(this.options[this.selectedIndex]).height());
  });
});

Here is a demo http://jsfiddle.net/xf3wD/

Answer 3

If you're using a library like jquery, you can do:

$('#select option:first').height()

See here.

If you're not using jquery, look at offsetHeight. This should get you what you want.

Answer 4

On select you can do that:

$(document).ready(function() {

    $('#select').click(function() {
        var H = $(this).children().height();
        alert(H);
    });

});