Sie können die javascript verwenden wählen

Objekt in einer leistungsfähigen Weise für HTML5 und CSS3 Programmierung benötigt. Um mehrere Selektionsarbeit zu machen, müssen Sie ein paar Änderungen vornehmen, sowohl in die HTML und javascript-Code. Schauen Sie sich diese Seite mit einem Mehrfachauswahl-Listenfeld.

Wie eine Mehrfachauswahl Objekt auswählen zu codieren

Sie ändern die wählen Code in zwei Möglichkeiten, um mehrere Auswahlen zu treffen:

• Geben Sie eine Mehrfachauswahl erlaubt sind. In der Standardeinstellung wählen Boxen haben nur einen Wert. Sie benötigen einen Schalter, um den Browser zu sagen, mehr als ein Element zu ermöglichen, ausgewählt werden.

• Machen Sie den Modus ein mehrzeiliges wählen. Die Standard-Drop-Down-Verhalten ist nicht sinnvoll, wenn Sie mehrere Auswahlen wollen, weil der Benutzer auf einmal alle Optionen zu sehen muss. Die meisten Browser schaltet automatisch in einen mehrzeiligen Modus, aber Sie sollten den Prozess direkt zu steuern.

Mehrfachauswahl
 

Der Code ist nicht schockierend, aber es hat einige wichtige Merkmale aufweisen:

• Ruf den wählen Objekt selLanguage. Wie üblich, müssen die Formelemente ein Ich würde Attribut, so dass Sie es in der javascript.

• Ergänzen Sie die mehrere Attribut zu Ihrem Objekt. Dieses Attribut weist den Browser mehrere Eingänge mit Shift + Klick (für zusammenhängende Auswahl) oder Strg + Klick (für eine genauere Auswahl) zu akzeptieren.

• Stellen Sie den Größe bis 10. Die Grße zeigt die Anzahl der Zeilen angezeigt werden.

• Machen Sie eine Taste. Mit Mehrfachauswahl, werden Sie wahrscheinlich nicht wollen, um die Aktion auszulösen, bis der Benutzer Auswahl beendet hat zu machen. Eine separate Taste ist der einfachste Weg, den Code, um sicherzustellen, wird ausgelöst, wenn Sie es passieren soll.

• Erstelle ein Ausgabe div. Dieser Code enthält die Antwort.

Wie den javascript-Code zu schreiben

Der javascript-Code für eine Mehrfachauswahl-Listenfeld zu lesen ist ein bisschen anders als die Standard-Auswahl-Code. Das Wert Eigenschaft gibt in der Regel ein Wert, sondern eine Mehrfachauswahl-Listenfeld gibt oft mehr als ein Ergebnis.

Der Schlüssel ist, zu erkennen, dass eine Liste von Option Objekte innerhalb eines wählen Objekt ist wirklich eine Art von Array, nicht nur einen Wert. Sie können in der Liste der Objekte genauer hinsehen, um zu sehen, welche diejenigen ausgewählt werden, die im Wesentlichen, was ist es, die showChoices () Funktion hat:

Zunächst scheint der Code einschüchternd, aber wenn Sie es brechen, ist es nicht zu schwierig.

1. Erstellen Sie eine Variable, die die gesamte darstellen wählen Objekt.

   Der Standard getElementById () Technik funktioniert gut.

    var selLanguage = document.getElementById ( "selLanguage") -

2. Erstellen Sie einen String-Variable die Ausgabe zu halten.

   Wenn Sie den Aufbau komplexer HTML-Ausgabe, mit einer String-Variablen arbeiten, ist viel einfacher als das direkte Code in das Element zu schreiben.

    var result = "
   Ihre Languageslt; / h2> "-

3. Erstellen Sie eine ungeordnete Liste um die Ergebnisse anzuzeigen.

   Eine ungeordnete Liste ist ein guter Weg, um die Ergebnisse zu spucken.

    Ergebnis + = "
    N "-

4. Durchschreiten selLanguage als ob es ein Array.

   Benutze einen für Schleife das Listenfeld, Zeile für Zeile zu untersuchen. Beachten Sie, dass selLanguage hat ein Länge Eigenschaft wie ein Array.

    for (i = 0-i lt; selLanguage.length- i ++) {

5. Weisen Sie das aktuelle Element zu einer temporären Variablen.

   Das currentOption Variable enthält einen Verweis auf jede Option Element in das ursprüngliche Objekt als die Schleife fortschreitet.

    currentOption = selLanguage [i] -

6. Überprüfen Sie, ob das aktuelle Element ausgewählt wurde.

   Das Objekt currentOption hat ein ausgewählt Eigenschaft, die Sie, ob das Objekt erzählt vom Benutzer hervorgehoben. ausgewählt ist eine Boolesche Eigenschaft, es ist also entweder wahr oder falsch.

    if (currentOption.selected == true) {

7. Wenn das Element ausgewählt wurde, einen Eintrag in der Ausgabeliste hinzuzufügen.

   Wenn der Benutzer dieses Objekt hervorgehoben hat, einen Eintrag in der ungeordneten Liste in der beherbergte erstellen Ergebnis Variable.

    Ergebnis + = "

8. "+ CurrentOption.value +" lt; / li> n ";

9. Schließen Sie die Liste nach oben.

   Nachdem die Schleife die alle Radtouren durch Objekte abgeschlossen ist, können Sie die ungeordnete Liste close up Sie habe zu bauen.

    Ergebnis + = "lt; / ul> n" -

10. Drucken Ergebnisse an den div.

    Das Ausgabe divs innerHTML- Hotel ist ein idealer Ort, um die ungeordnete Liste zu drucken.

     output = document.getElementById ( "output") - output.innerHTML = result-

Etwas Seltsames ist hier los. Die Optionen eines Select-Box handeln, wie ein Array. Eine ungeordnete Liste ist viel wie ein Array. Bingo! Sie sind Arrays, nur in verschiedenen Formen. Sie können als ein Array von jedem aufgeführten Daten denken. Manchmal organisieren Sie die Daten wie eine Liste (für die Anzeige), manchmal wie ein Array (für die Speicherung im Speicher), und manchmal ist es eine ausgewählte Gruppe (für Benutzereingaben).