Home/ Questions/Q 6726483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:55:58+00:00

I have the following HTML code: <html> <head> <title>Cheeses</title> </head> <body> <select name=multi id=multi

  • 0

I have the following HTML code:

<html>
  <head>
    <title>Cheeses</title>
  </head>
  <body>
    <select name="multi" id="multi" multiple="multiple">
        <option selected="selected" label="emmental">Emmental</option>
        <option label="roquefort" >Roquefort</option>
        <option label="parmigiano">Parmigiano</option>
        <option label="cheddar">Cheddar</option>
    </select>
  </body>
</html>

In JavaScript in IE, how do I get the dimensions and position of one of the <option> elements? Doing the following doesn’t work:

var selectEl = document.getElementById("multi");
var options = selectEl.getElementsByTagName("option");
var rect = options[1].getBoundingClientRect();

A rect is returned, but it has zero for all properties of the rect. I would prefer a straight JavaScript solution, not relying on a library like JQuery, but if I have to, I’d accept a JQuery answer.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The options won’t have any dimensions, the containing select element has the width & height. 

    var width = select.style.width
var height = select.style.height

    Calculating the screen position is trickier because you have the work out the offset widths and heights of the parent elements.

    jQuery has methods that work out these values, but they aren’t always that accurate.

    • 0