Select options-samling

HTML DOM Select objekt

Definition og brug

options Samlingen returnerer alle valgmuligheder i dropdown-menuen Option-element s samlingen.

Bemærk:Elementerne i samlingen er sorteret efter deres fremtræden i kildekoden.

Eksempel

Eksempel 1

Se, hvor mange valg der er i en bestemt dropdown-liste:

var x = document.getElementById("mySelect").options.length;

Prøv det selv

x's resultat vil være:

4

Tip:Flere eksempler findes nedenfor på siden.

Syntaks

selectObject.options

Egenskab

Egenskab Beskrivelse
length

Returnerer antallet af <option>-elementer i samlingen.

Bemærk:Denne egenskab er skrivebeskyttet
selectedIndex Indstil eller returner indekset for det valgte <option>-element i samlingen (fra 0).

Metode

Metode Beskrivelse
[index]

Returner <option>-elementet med den angivne indeks (fra 0) fra samlingen.

Bemærk:Returnerer null, hvis indeksnummeret er uden for rækkevidde.
[add(option[,index] Tilføj <option>-elementet til samlingen på den angivne indeks. Hvis indeksen ikke er angivet, vil valget blive indsat i slutningen af samlingen.
item(index)

Returner <option>-elementet med den angivne indeks (fra 0) fra samlingen.

Bemærk:Returnerer null, hvis indeksnummeret er uden for rækkevidde.
namedItem(id)

Returner <option>-elementet med den angivne ID fra samlingen.

Bemærk:Hvis id Returnerer null, hvis det ikke findes.
remove(index) Fjern <option>-elementet med den angivne indeks fra samlingen.

Teknisk detalje

DOM-version: Core Level 2 Document Object
Returværdi:

HTMLOptionsCollection-objektet repræsenterer alle <option>-elementer i <select>-elementet.

Elementerne i samlingen er sorteret efter deres fremtræden i kildekoden.

Flere eksempler

Eksempel 2: [index]

Hent teksten for den første valg i dropdown-listen (indeks 0):

var x = document.getElementById("mySelect").options[0].text;

Prøv det selv

x's resultat vil være:

Æble

Eksempel 3: item(index)

Hent teksten for den første valg i dropdown-listen (indeks 0):

var x = document.getElementById("mySelect").options.item(0).text;

Prøv det selv

x's resultat vil være:

Æble

Eksempel 4: namedItem(id)

Hent teksten for valget med id="orange" i dropdown-listen:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

Prøv det selv

x's resultat vil være:

Appel

Eksempel 5

Tilføj “Kiwi” valg i listen over nedenfor på indeksposition “1”:

var x = document.getElementById("minVaelg");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);

Prøv det selv

Eksempel 6

Fjern indstillingen med indeks "1" fra dropdownlisten:

var x = document.getElementById("minVaelg"); x.options.remove(1);

Prøv det selv

Eksempel 7

Gennemløb alle indstillinger i dropdownlisten og udskriv teksten for hver indstilling:

var x = document.getElementById("minVaelg");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
  txt = txt + x.options[i].text + "<br>";
}

Prøv det selv

x's resultat vil være:

Æble
Appel
Ananas
Banana

Eksempel 8

Vælg en indstilling i dropdownlisten, og vis teksten for den valgte indstilling i elementet med id="demo":

var x = document.getElementById("minVaelg");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

Prøv det selv

x's resultat vil være:

Banana

Eksempel 9

Opdater dropdownlisten med valget fra en anden dropdownliste:

var bilerOgModeller = {};
bilerOgModeller['VO'] = ['V70', 'XC60', 'XC90'];
bilerOgModeller['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
bilerOgModeller['BMW'] = ['M6', 'X5', 'Z3'];
function SkiftBilListe() {
  var bilerList = document.getElementById("bil");
  var modelList = document.getElementById("bilmodel");
  var velBil = bilerList.options[bilerList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var biler = bilerOgModeller[velBil];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

Prøv det selv

Browser understøttelse Samling options Ja Ja Ja Ja Ja

HTML DOM Select objekt