Exemple
Découvrez combien d'options il y a dans une liste déroulante spécifique:
var x = document.getElementById("mySelect").options.length;Le résultat de x sera:
4 Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La collection d'options retourne une collection de tous les <option> éléments dans une liste déroulante.
Note: Les éléments de la collection sont classés comme ils apparaissent dans le code source.
Support du navigateur
| Collection | |||||
|---|---|---|---|---|---|
| options | Oui | Oui | Oui | Oui | Oui |
Syntaxe
selectObject .optionsPropriétés
| Propriété | La description |
|---|---|
| length | Renvoie le nombre de <option> éléments de la collection. Note: Cette propriété est en lecture seule |
| selectedIndex | Définit ou renvoie l'index de l'sélectionné <option> élément de la collection (starts at 0) |
méthodes
| méthode | La description |
|---|---|
| [ index ] | Renvoie la <option> élément de la collection à l'index spécifié (starts at 0) à (starts at 0) . Remarque: renvoie null si le numéro d'index est hors de portée |
| [ add( option [, index ]) ] | Ajoute une <option> élément dans la collection à l'index spécifié. Si aucun index est spécifié, il insère l'option à la fin de la collection |
| item( index ) | Renvoie la <option> élément de la collection à l'index spécifié (starts at 0) à (starts at 0) . Remarque: renvoie null si le numéro d'index est hors de portée |
| namedItem( id ) | Retourne la <option> élément de la collection avec l'id spécifié. Note: Retourne null si l'identifiant n'existe pas |
| remove( index ) | Supprime la <option> élément avec l'index spécifié de la collection |
Détails techniques
| DOM Version: | Niveau Core 2 document objet |
|---|---|
| Valeur de retour: | Un objet HTMLOptionsCollection, représentant tous les <option> éléments dans le <select> élément. Les éléments de la collection sont classés comme ils apparaissent dans le code source |
autres exemples
Exemple
[Index]
Obtenez le texte de la première option (index 0) dans une liste déroulante:
var x = document.getElementById("mySelect").options[0].text;Le résultat de x sera:
Apple Essayez vous - même » Exemple
item( index )
Obtenez le texte de la première option (index 0) dans une liste déroulante:
var x = document.getElementById("mySelect").options.item(0).text;Le résultat de x sera:
Apple Essayez vous - même » Exemple
namedItem( id )
Obtenez le texte de l'option avec id = « orange » dans une liste déroulante:
var x = document.getElementById("mySelect").options.namedItem("orange").text;Le résultat de x sera:
Orange Essayez vous - même » Exemple
Ajouter un "Kiwi" option à la position d'index "1" dans une liste déroulante:
var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1); Essayez vous - même » Exemple
Supprimez l'option avec l' index "1" dans une liste déroulante:
var x = document.getElementById("mySelect");
x.options.remove(1); Essayez vous - même » Exemple
Boucle à travers toutes les options dans une liste déroulante, et la sortie du texte de chaque option:
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0;
i < x.length; i++) {
txt = txt + x.options[i].text + "<br>";
}Le résultat de txt sera:
Apple
Orange
Pineapple
Banana Essayez vous - même » Exemple
Choisissez une option dans la liste déroulante et la sortie du texte de l'option sélectionnée dans un élément avec id = « demo »:
var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;Le résultat pourrait être:
Banana Essayez vous - même » Exemple
Modifiez les options dans une liste déroulante en fonction de l'option sélectionnée dans une autre liste déroulante:
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW']
= ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList =
document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length)
{
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++)
{
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
} Essayez vous - même » <Choisir un objet