For a select element, is there any difference between the length property and the options.length property?

In particular, I'd be interested to know if there's a difference in terms of browser support.

For a select element, is there any difference between the length property and the options.length property?

In particular, I'd be interested to know if there's a difference in terms of browser support.

• javascript
• forms
• dom
• select

• Can you clarify "difference"? Different in output, execution speed..? – Sterling Archer Commented Oct 10, 2013 at 16:55
• @RUJordan any difference. I haven't found any so far, and I am wondering why we would need two properties that act the same. – Christophe Commented Oct 10, 2013 at 16:57
• You should use .options.length, which makes the intention clear and is more clean. The .length property on the <select> itself does only exist because it can act as the options container itself (quirks introduced by IE and standardized with HTML5). – Bergi Commented Oct 10, 2013 at 16:59
• @Bergi not according to developer.mozilla/en-US/docs/Web/API/…, which states that select.length formally represents "The number of <option> elements in this select element". Either is fine, and either shows clear intention. Select.length is "the number of option elements in this select element", select.options.length is "the number of elements in the list of options childNodes on the select element". Semantic difference, but functionally equivalent. – Mike 'Pomax' Kamermans Commented Oct 10, 2013 at 17:02
• 1 @Christophe: I don't know (and would not care). Every current, decent browser supports both; It might be that early IE/NN did not support .options.length and that early other browsers were not IE-patible. – Bergi Commented Oct 10, 2013 at 17:11

3 Answers 3

Based on https://developer.mozilla/en-US/docs/Web/API/HTMLSelectElement there is no functional difference, only a "semantic if you want to get really technical about it" difference:

• select.length is formally declared as the number of option elements contained by a select element. It will by spec-definition always have the same value as select.options.length, which is:

• select.options.length is "the number of elements in the list of options childNodes on the select element". Technical difference, semantically slightly different, but due to how select.length has been formalised, for all intents and purposes always the same value.

So the first technically "lives" on the <select> element, the second lives on the options property of the <select> element (which is an HTMLOptionsCollection, not an array!), but the value's always the same and it doesn't really matter which you use. Browsers that implement the spec (see [1] and [2]) always give the correct value for either.

[1] http://www.w3/TR/2002/PR-DOM-Level-2-HTML-20021108/html.html#ID-5933486

[2] http://www.w3/TR/2002/PR-DOM-Level-2-HTML-20021108/html.html#HTMLOptionsCollectionwill

Both

select.length

and

select.options.length

are supported by all major browsers.

The only difference between them (as far as I know) is

• select.length is select property which returns its number of options - that's the definition. In other words length in select is a special property of this particular DOM element
• select.options.length simply returns the number of elements in options collection (the same logic as document.getElementsByTagName('div').length)

It's not the same definitely I had to find out the hardway trying

There are 3 options defined in the HTML/PHP

Calling a JQUERY function and results are

Before selecting anything in the bobox

console.log(select.length);   // 1
console.log(select.options.length); // undefined 

After selecting something

console.log(select.length);   // 3
console.log(select.options.length); // 3