Wenn Sie an einem Projekt arbeiten, werden Sie dynamisch untergeordnete Optionen auf der Grundlage der übergeordneten Optionen begegnen und mehrere Kontrollkästchen auflisten. Führen Sie bei der Übermittlung die ausgewählten in einen Charakter zusammen und senden Sie sie in den Hintergrund.
In diesem Kapitel werden Sie angegeben, wie Sie diesen Vorgang über JS Control implementieren:
1: Entwerfen Sie die übergeordnete Kategorie als Radio, fügen Sie jedem Radio ein Onclick -Ereignis hinzu, und die Standardkategorie 1 ist der Auswahlstatus.
<input type = "checkBox" name = "selectAll" id = "selectAll" onclick = "selectAll ();" checked = "checked"/> Wählen Sie alle <br> <Eingabe type = "radio" name = "lb" id = "lb" value = "1" onclick = "getZlb (1);" checked = "checked"/> Kategorie 1 <Eingabe type = "radio" name = "lb" id = "lb" value = "2" onclick = "getZlb (2);"/> Kategorie 2 <Eingabe type = "radio" name = "lb" id = "lb" value = "3" Onclick = "getzlb (3);
2: Wenn die Seite zunächst geladen wird, sollte die Unterkategorie gemäß der ausgewählten übergeordneten Kategorie angezeigt werden. Beim Klicken auf die Schaltfläche sollte auch die Unterkategorie erhalten werden, sodass sie als dieselbe Methode geschrieben und nach Abschluss der Seite des Ladens aufgerufen wird.
window.onload = getZlb ();
3: Holen Sie sich die JS -Methode der Unterkategorie und erhalten Sie dynamisch Hintergrunddaten über die AJAX -Methode
/** * Unterkategorie abrufen und anzeigen, nachdem die Seite geladen wird. für (var i = 0; i <obj.length; i ++) {if (obj [i] .Conted) {Getzlbnews (obj [i] .Value); }}} Funktion getZlbNews () {(Kartentypdaten über AJAX; Rückgabedaten in Ergebnis, JSON -Format) var json = eval ("("+result+")"); // Konvertieren Sie in JSON -Objekt // den Bereich von der Subtyp var parent = document.getElementById ('xsqy'). // die Unterregion leer legen, um Eltern zu verhindern. var p = 0; var span = ""; // Überprüfen Sie alle document.getElementById ("selectAll"). Checked = true; für (var i in json) {p ++; span = "<span style =/" Anzeige: Inline-Block; Breite: 75px;/"> <Eingabetyp =/" Kontrollkästchen/"checked =/" checked/"onclick =/" CheckSelectall ();/"name =/" zlb/"value =/" "+i+"/">"+JSON [i]+"</span>"; // Wenn es mehr als 11 Unterprüfkästen gibt, dann ist Newline if (p%11 == 0) {span = span+"<br>"; } // Sub-Check-Boxen eins nach eins zum Sub-Field Parent hinzufügen. }}4: Hintergrundlogik,
/ ** * Return Map Format Map <Code, Name> * @return */ public String getZlb () {map <Integer, String> zlb = service.getZlb (); // MAP in JSON -Format JSON A = JsonSerializer.tojson (ZLB) konvertieren; return a.tostring (); }Fünf
/ ** * Wählen Sie alle oder abbrechen alle */ function selectAlldz () {var CheckBoxs = document.getElementsByName ("zlb"); für (var i = 0; i <checkBoxs.length; i ++) {// Regler, ob die Unterkategorie ausgewählt wird, basierend darauf, ob die ausgewählte Schaltfläche für Steuerungspokalisierungen ausgewählt ist [i] .Poned = document.getElementById ("selectall"). Überprüft; }}/ ** * Bestimmen Sie, ob die Unterkategorie alle ausgewählt ist. Wenn die ausgewählte Schaltfläche alle Schaltflächen ausgewählt ist, wird die Schaltfläche nicht ausgewählt. var isSelectall = true; für (var i = 0; i <pectboxs.length; i ++) {if (checkboxs [i] .Poned == false) {isSelectAll = false; }} if (isSelectAll == false) {document.getElementById ("selectAll"). Checked = false; } else {document.getElementById ("selectAll"). checked = true; }}/*** Spleißen Sie die ausgewählten IDs an und trennen Sie sie mit Kommas*/function getAllidstr (checkName) {var select = document.getElementsByName (checkName); var idstr = new Array (); für (var i = 0; i <select.length; i ++) {if (select [i]. Checked == true) {idstr = idstr.concat (select [i] .Value); }} return idstr.join (',');};6: Wenn Sie die nächste Operation ausführen, wenden Sie sich bei der Senden in ein Zeichen aus und weisen Sie es einem versteckten Textfeld zu, um es dem Hintergrund zu übermitteln
// Ruf die Spleiß -ID -Methode auf und übergiere den Namen des Elements, das über var Alzlb = getAllidstr ('ZLB' betrieben werden soll. // Erstellen Sie ein verstecktes Textfeld, weisen Sie den Spleiß zu und verwenden Sie es dokument.getElementById ('Altzlbstr'). Value = Alzlb;Das obige ist nur eine persönliche Meinung. Wenn Sie bessere Lösungen haben, lassen Sie es mich bitte wissen.
Das obige ist der vollständige Inhalt der Implementierungsmethode, um subkomplexe Optionen dynamisch zu erhalten und alle ausgewählten Auswahlen und Einreichungen zu entwerfen. Ich hoffe, jeder wird Wulin.com mehr unterstützen ~