Kürzlich müssen mehrere Seiten einige Dropdown-Listenfelder laden, aus denen Benutzer auswählen können. Es stellt sich heraus, dass sie auf der Serverseite geladen werden und verwendet werden sollten. Schließlich müssen einige der Funktionen der DropdownList in die Client -Implementierung eingereicht werden. Jetzt fühlen sich die Dropdown-List-Funktionen viel besser an als beim Einsetzen auf die Serverseite.
Spezifische Methoden:
Geben Sie eine DropdownList -Steuerung in die Seite ein und fügen Sie ein Element hinzu, um den generierten HTML -Code zu analysieren. Auf diese Weise ist der Testcode bei Verwendung von JS für dynamische Steuerung wie folgt sehr klar:
<ASP: DropdownList ID = "DropdownList1" Runat = "Server"> <ASP: ListItem> 1 </ASP: ListItem> </ASP: DropdownList>
Ansicht im Browser und analysieren Sie die HTML: Folgendes ist der HTML -Code, der durch die DropdownList -Steuerung generiert wird. Nichts wie gewöhnliche Auswahl
Es gibt einen Unterschied. Anschließend können Sie dynamisch füllen, löschen, auswählen und andere Steuerelemente über JS auswählen.
<select name = "DropdownList1" id = "DropdownList1"> <Option Value = "1"> 1 </Option> </select>
Sie können <ASP: ListItem> 1 </ASP: ListItem> löschen und nun zwei HTML -Schaltflächen hinzufügen, um die Hinzufügung von Optionen zu implementieren und alle Optionen zu löschen. Der Schaltflächenquellcode lautet wie folgt:
<input id = "button1" type = "button" value = "option hinzufügen" onclick = "addOption ()" /> <input id = "button2" type = "button" value = "Alle Optionen löschen" onclick = "deloption ()" />
Das Hinzufügen und Löschen von Funktionen ist wie folgt:
Funktion addOption () {var ddlobj = document.getElementById ("DropdownList1"); // Objekt abrufen if (ddlobj.length> 0) deloption (); // Erstens löschen und dann fügen Sie var opttext = new Array ("founder", "China", "1". ooption = null; für (var i = 0; i <optText.length; i ++) {ooption = new option (optText [i], optValue [i]); ddlobj.options.add (ooption);}} function deloption () {var ddloBj = document.document.document.document.document.document. i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // Firefox unterstützt ddlcurselectKey.options.remove (), beide dh unterstützend}}}}}}}}}}}In einem Browser können Sie problemlos ausgewählte Dropdown-Optionen erstellen, die effizienter sind als Server, da diese von Client generierten Erstellung sind
Code, der nebenbei funktioniert. Wenn Sie jedoch DropdownList1.SelectedValue verwenden möchten, um die vom Benutzer ausgewählte Option zu erhalten, haben Sie
Habe einen Fehler. Dies liegt daran, dass DropdownList von JS dynamisch hinzugefügt wird, sodass seine Elemente nicht zum ViewState gehören und nicht gepflegt werden.
Das heißt, wir können es nicht auf der Serverseite verarbeiten. Um dieses Problem zu lösen, gibt es zwei Möglichkeiten: 1.. Versteckte Kontrolle speichern
Benutzeroptionsmethode; 2. Methode Request.Form. (Siehe MSDN Taste Ajax)
1. Wir fügen der Seite eine versteckte Steuerung hinzu und speichern sie, um die Informationen zu den Änderungen der DropdownList -Optionen zu speichern, sodass der Sinn für die Wahl des Benutzers der Benutzer speichert
Nachdem wir die Interessensinformationen haben, können wir die Informationen auf dem Server erhalten und sie verarbeiten, um die Arbeitsteilung zwischen Kunden und Dienstleistungen vernünftig zu erkennen.
Fügen Sie der DropdownList -Steuerung ein Onchange -Ereignis hinzu, und sein HTML -Code lautet wie folgt:
<ASP: DropdownList ID = "DropdownList1" Runat = "Server" Onchange = "resvitem ()"> </ASP: DropdownList>
Das Onchange -Ereignis ist wie folgt. Dieses Ereignis speichert hauptsächlich den vom Benutzer ausgewählten Wert:
function ResvItem () {var objddl = document.getElementById ("DropdownList1"); document.getElementById ("Hiddenfield1"). value = objddl.Options [objddl.selectedIndex] .Value;}Danach verwenden wir einen ASP: Taste -Steuerelement, um die Ergebnisse zu testen:
Protected void button1_click (Objektabsender, EventArgs e) {response.write (Hiddenfield1.Value);}Zu diesem Zeitpunkt wurden alle Arbeiten abgeschlossen, aber es gibt immer noch ein Problem. Das Änderungsereignis der DropdownList wird nur ausgewählt, wenn der Benutzer die Dropdown-Liste ändert.
Es wird nur ausgelöst, wenn der Artikel ist. Wenn der Benutzer die Standardoptionen einreicht, wird der Nullwert erhalten. Bei der Fülloption können wir daher können
Versteckte Initialisierung. Fügen Sie dem Addoption -Ereignis wie folgt eine Codezeile hinzu:
Funktion addOption () {var ddlobj = document.getElementById ("DropdownList1"); // Objekt abrufen if (ddlobj.length> 0) deloption (); // Erstens löschen und dann fügen Sie var opttext = new Array ("founder", "China", "1". ooption = null; für (var i = 0; i <optText.length; i ++) {ooption = new option (optText [i], optValue [i]); ddlobj.options.add (ooption);} document.getelementById ("HiddenField1").Der oben genannte rote Teil ist jedoch nicht erfolgreich im add unter TT -Browser, und ich habe noch kein anderes Durchsuchen ausprobiert. Hier ist eine andere Art zu schreiben:
Funktion getDeptList () {var ddlCityType = document.getElementById ("ddlCityType"); var ddlposition = document.getElementById ("ddlPosition"); var v = ddlcityType.options [ddlcitytype. Deptlist = guden_userregister.getDeptlist (v.Value) .value; var deptlist = new Array (); Deptlist = Deptlist.Split (';); Für (var i = 0; i <deptlist.length; document.createelement ("Option"); opt.innnerHtml = Dept [1]; opt.value = Dept [0]; ddlposition.insertbefore (opt, ddlposition.Firstchild);}}} Funktion Deloption () {var ddluSchool = document.getelementById ("ddluSerschool"); while(num>0){for(var j=0;j<num;j++){ddluserSchool.remove(j);}num=ddluserSchool.length;}}function GetSchoolList(){DelOption();var ddlProvince = document.getElementById("ddlProvince");var ddluserSchool = document.getElementById ("ddluserSchool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptlist = guden_userregister.getschoollist (v.Value) .Value; i = 0; i <Deptlist.length; i ++) {if (deptlist [i]! opt.innerhtml = Dept [1]; opt.value = Dept [0];