---
title: "HTMLOptionsCollection | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

# Interface HTMLOptionsCollection

The **`HTMLOptionsCollection`** interface represents a collection of HTML elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items. This object is returned only by the options property of select.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection)

interface HTMLOptionsCollection {  
    [length](#length): number;  
    [selectedIndex](#selectedindex): number;  
    ["\[iterator\]"](#iterator-1)(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)\>;  
    [add](#add-1)(  
        element: [HTMLOptGroupElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptGroupElement/) | [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/),  
        before?: number | [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) | null,  
    ): void;  
    [item](#item-1)(index: number): [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null;  
    [namedItem](#nameditem-1)(name: string): [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null;  
    [remove](#remove-1)(index: number): void;  
    \[index: number\]: [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/);  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.HTMLOptionsCollection))

-   [HTMLCollectionOf](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/)<[HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)\>
    -   HTMLOptionsCollection

#### Indexable

-   \[index: number\]: [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)
    

##### Index

### Properties[](#properties)

[length](#length) [selectedIndex](#selectedindex)

### Methods[](#methods)

[\[iterator\]](#iterator) [add](#add) [item](#item) [namedItem](#nameditem) [remove](#remove)

## Properties[](#properties-1)

### length[](#length)

length: number

The **`length`** property of the HTMLOptionsCollection interface returns the number of elements in the collection. The property can get or set the size of the collection.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection/length)

Overrides [HTMLCollectionOf](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/).[length](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/#length)

### selectedIndex[](#selectedindex)

selectedIndex: number

The **`selectedIndex`** property of the HTMLOptionsCollection interface is the numeric index of the first selected element, if any, or −1 if no is selected. Setting this property selects the option at that index and deselects all other options in this collection, while setting it to -1 deselects any currently selected elements. It is exactly equivalent to the selectedIndex property of the HTMLSelectElement that owns this collection.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection/selectedIndex)

## Methods[](#methods-1)

### \[iterator\][](#iterator)

-   "\[iterator\]"(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)\>[](#iterator-1)
    
    #### Returns [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)\>
    
    Inherited from [HTMLCollectionOf](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/).[\[iterator\]](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/#iterator)
    

### add[](#add)

-   add(  
        element: [HTMLOptGroupElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptGroupElement/) | [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/),  
        before?: number | [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) | null,  
    ): void[](#add-1)
    
    The **`add()`** method of the HTMLOptionsCollection interface adds an HTMLOptionElement or HTMLOptGroupElement to this HTMLOptionsCollection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection/add)
    
    #### Parameters
    
    -   element: [HTMLOptGroupElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptGroupElement/) | [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/)
    -   `Optional`before: number | [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) | null
    
    #### Returns void
    

### item[](#item)

-   item(index: number): [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null[](#item-1)
    
    The HTMLCollection method **`item()`** returns the element located at the specified offset into the collection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCollection/item)
    
    #### Parameters
    
    -   index: number
    
    #### Returns [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null
    
    Inherited from [HTMLCollectionOf](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/).[item](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/#item)
    

### namedItem[](#nameditem)

-   namedItem(name: string): [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null[](#nameditem-1)
    
    #### Parameters
    
    -   name: string
    
    #### Returns [HTMLOptionElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLOptionElement/) | null
    
    Inherited from [HTMLCollectionOf](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/).[namedItem](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCollectionOf/#nameditem)
    

### remove[](#remove)

-   remove(index: number): void[](#remove-1)
    
    The **`remove()`** method of the HTMLOptionsCollection interface removes the element specified by the index from this collection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection/remove)
    
    #### Parameters
    
    -   index: number
    
    #### Returns void