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>

Unfounded

Are you asking how to get the combined height of all the options in a select element? Or just the height of the selected option? – Comedienne

Could you give us a clue as to your mark-up? – Scorecard

@Comedienne either would be sufficient. – Unfounded

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/

Croze

nope i was wrong at my previous (deleted) comment, so it does not work. – Unfounded

@Unfounded give us some more information and perhaps we could assist you. – Croze

@Unfounded ... Take a look at the demo I made and let me know what is wrong. – Croze

@John Hartsokc: Try it in IE. The code reports the size that you specified, eventhough the style is ignored. So, it's not reporting the actual size of the options. – Upstairs

@Guffa, yeah IE will probably behave differently as thier implementation of dropdowns is different than FF. Not sure about this one but I will think about it. – Croze

@Upstairs Actually you may be able to assume the height of the option is the height of the select as IE does not see to support the height on an option tag. – Croze

@John it seems it is browser depended so other than firefox i may calculate an option height based on font size. Thanks. – Unfounded

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.

Upstairs

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.

Protectorate

Unfortunately this does not work as computed value of an option element is 0 – Unfounded

I haven't tried jquery, but I'd guess they handle option heights appropriately. Thanks for the tip though did not know that about options. – Protectorate

Answer 4

On select you can do that:

$(document).ready(function() {

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

});

Lahomalahore

click event never is fired on a select element but mousedown. Neither works anyway. Also children is a method not property so it should be children() – Unfounded