Getting the height of an option element with javascript?

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.

Thanks.

Edit @david old school select

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

Answer 1

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 2

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

});