Wie wählen Sie Optionen durchlaufen

Wenn Sie Websiteformularen in HTML-Seiten erstellen, können Sie Elemente mit einer Dropdown-Liste der Optionen für Benutzer zur Auswahl "wählen Sie" einfügen. Sie müssen möglicherweise die Informationen über diese Option-Elemente innerhalb des JavaScript-Codes für Ihre Site zugreifen. Indem Sie eine Schleife in Ihrem JavaScript-Code erstellen, können Sie die ausgewählten Optionen durchlaufen Zugriff auf Informationen zu den HTML-Inhalt und Attribute in ihnen. Die HTML-Inhalte können Sie auch ändern, wenn dies im Sinne Ihrer Seite passt.

Anweisungen

1 Erstellen Sie eine Funktion im Head-Bereich Ihrer HTML-Webseite. Zwischen den öffnenden und schließenden Head-Tags fügen Sie den folgenden Abschnitt und Funktion Skriptgliederung:

< Skript-Typ = "Text/Javascript" >Funktion loopThroughOptions(selectID) {}Funktionsimplementierung hier}< / script >

2 Fügen Sie den Code innerhalb der Funktion durchlaufen Sie Ihre wählen Sie Optionen. Um die Seite aufrufen, die Funktion anzuweisen, fügen Sie den folgenden Button auf Ihrer Seite:

< Eingang Typ = "button" onclick="loopThroughOptions('foodselect')" Wert = "Endlosschleife" / >

Diese Schaltfläche ist für Demonstration, aber erlaubt Ihnen zu sehen, dass Ihre Schleife Codefunktionen. Der Funktionsaufruf übergibt die select-Element-ID als Parameter.

3 Fügen Sie das select-Element zu einer Seite mit Optionen. Wenn Sie nicht bereits ein select-Element in Ihre Seite verfügen, verwenden Sie den folgenden Beispielcode Markup:

< select Id = "Foodselect" >< option Value = "Apfel" > Apple < / option >< option Value = "Käse" > Käse < / option >< option Value = "Zwiebel" > Zwiebel < / option >< / select >

Stellen Sie sicher, dass Ihr Code das ID-Attribut enthält, wie die JavaScript-Funktion es verwenden wird, um das Element zu identifizieren. Platzieren Sie das select-Steuerelement vor dem Test-Schaltfläche.

4 Fügen Sie den folgenden Code in Ihre JavaScript-Funktion, um einen Verweis auf das select-Element mit den ID-Attribut-Wert zu erhalten:

Wählen Sie Var = document.getElementById(selectID);

Dieser Code verwendet den übergebenen Parameter, um einen Verweis auf das Element abzurufen. Fügen Sie den folgenden Code, mit diesem Element eine Array-Variable mit der Option-Elemente zu erwerben:

entscheidet sich Var = select.options;

Diese Variable enthält jetzt ein Array, das der Code durchlaufen kann.

5 Erstellen Sie eine Schleife für Ihre Optionen wählen:

Var opt = 0;für (opt = 0; entscheiden < opts.length; entscheiden ++) {}die Optionen verarbeiten}}

Dieser Code wird einmal für jede Option-Element im angegebenen select-Element ausgeführt. Die Schleife beginnt bei Null, der die erste Indexposition in ein Array, wird das Array durchlaufen, bis sie die endgültige Position erreicht.

6 Verarbeiten Sie jedes Element im Array wählen Sie Optionen. Der folgende Beispielcode kann verwendet werden, zu überprüfen, ob Ihre Funktion funktioniert; Fügen Sie ihn in der Schleife:

Warnung ("Option" + entscheiden + "=" + opts[opt].value);

7 Speichern Sie die Seite, und öffnen Sie sie in einem Web-Browser zu testen. Sie sollten das Value-Attribut jeder Option-Elements geschrieben, um eine Warnung, eine nach der anderen sehen. Andere Aspekte des Option-Elements wie die HTML-Inhalte können Sie wie folgt zugreifen:

Warnung ("Option" + entscheiden + "=" + opts[opt].innerHTML);

Tipps & Warnungen

• Sie können auch Aspekte der Option-Elemente in JavaScript festlegen.
• Achten Sie darauf, nicht versehentlich eine Endlosschleife erstellen beim Durchlaufen von Arrays.