Récemment, plusieurs pages doivent charger des boîtes de liste déroulantes pour les utilisateurs. Il s'avère qu'ils se chargent du côté du serveur et doivent être utilisés. Enfin, en raison des considérations de logique commerciale, certaines des fonctions de Dropdownlist doivent être placées dans l'implémentation du client. Désormais, les fonctions de liste déroulante sont beaucoup mieux que lors de leur mise en place du serveur.
Méthodes spécifiques:
Mettez un contrôle de liste de dropdown dans la page et ajoutez un élément pour analyser le code HTML qu'il génère. De cette façon, lorsque vous utilisez JS pour un contrôle dynamique, le code de test sera très clair comme suit:
<asp: dropdownlist id = "dropdownlist1" runat = "server"> <asp: listItem> 1 </ asp: listItem> </ asp: dropdownlist>
Afficher dans le navigateur et analyser le HTML: ce qui suit est le code HTML généré par le contrôle DropdownList. Rien de tel que de sélection ordinaire
Il y a une différence. Ensuite, vous pouvez remplir, supprimer, sélectionner, sélectionner dynamiquement et d'autres contrôles via JS.
<select name = "dropdownlist1" id = "dropdownlist1"> <option value = "1"> 1 </opoption> </lect>
Vous pouvez supprimer <asp: listItem> 1 </sp: listItem> et ajouter maintenant deux commandes de bouton HTML pour implémenter l'ajout d'options et supprimer respectivement toutes les options. Le code source du bouton est le suivant:
<input id = "Button1" type = "bouton" value = "Ajouter l'option" onClick = "addoption ()" /> <input id = "Button2" type = "Button" value = "Delete All Option" onClick = "deLoption ()" />
L'ajout et la suppression des fonctions sont les suivants:
function addOption(){var ddlObj = document.getElementById("DropDownList1");//Get object if(ddlObj.length>0)delOption();//Delete all of it first, and then add var optText = new Array("founder","china","beijing");var optValue = new Array("0","1","2");var ooption = null; for (var i = 0; i <optText.length; i ++) {ooption = new option (optText [i], optValue [i]); ddlobj.options.add (ooption);}} function deLoption () {var ddlobj = document.getelementById ("dropdingList1"); i = ddlobj.length-1; i> = 0; i -) {ddlobj.remove (i); // firefox ne prend pas en charge ddlcurselectkey.options.remove (), les deux ie support}}Afficher dans un navigateur, vous pouvez facilement créer des options déroulantes sélectionnées, qui sont plus efficaces que les serveurs car ce sont générés par le client
code qui fonctionne sur le côté. Mais pour le moment, si vous souhaitez utiliser DropdownList1.SelectedValue pour obtenir l'option sélectionnée par l'utilisateur, vous aurez alors
J'ai une erreur. En effet
C'est-à-dire que nous ne pouvons pas le gérer du côté du serveur. Pour résoudre ce problème, il existe deux façons d'utiliser: 1. Enregistrer le contrôle caché
Méthode d'option utilisateur; 2. Méthode de la demande. (Voir MSDN Taste Ajax)
1. Nous ajoutons un contrôle caché à la page et les utilisons pour enregistrer les informations sur les modifications des options de liste déroulante, afin que le sens du choix de l'utilisateur
Après avoir eu les informations d'intérêt, nous pouvons obtenir les informations sur le serveur et les traiter pour réaliser raisonnablement la division du travail entre les clients et les services.
Ajoutez un événement OnChange au contrôle DropdownList, et son code HTML est le suivant:
<asp: dropdownlist id = "dropdownlist1" runat = "server" onchange = "resvitem ()"> </ asp: dropdownlist>
L'événement Onchange est le suivant. Cet événement enregistre principalement la valeur sélectionnée par l'utilisateur:
fonction resvitem () {var objddl = document.getElementById ("DropdownList1"); document.getElementById ("HiddenField1"). Value = objddl.options [objddl.selectedIndex] .value;}Après cela, nous utilisons un contrôle ASP: Button pour tester les résultats:
Button void protégé1_click (expéditeur d'objet, EventArgs e) {réponse.write (HiddenField1.Value);}À ce stade, tous les travaux ont été achevés, mais il y a toujours un problème. L'événement de modification de DropdownList n'est sélectionné que lorsque l'utilisateur modifie la liste déroulante.
Il ne sera déclenché que lorsque l'article est. Par conséquent, lorsque l'utilisateur se soumet avec les options par défaut, la valeur nul est obtenue. Par conséquent, lors de l'option de remplissage, nous pouvons
Initialisation cachée. Ajoutez une ligne de code à l'événement d'addition comme suit:
function addOption(){var ddlObj = document.getElementById("DropDownList1");//Get object if(ddlObj.length>0)delOption();//Delete all of it first, and then add var optText = new Array("founder","china","beijing");var optValue = new Array("0","1","2");var OOPTION = NULL; pour (var i = 0; i <optText.length; i ++) {ooption = nouvelle option (optText [i], optValue [i]); ddlobj.options.add (ooption);} document.getElementByid ("HiddenField1"). Value = optValue [0];}Cependant, la partie rouge ci-dessus ne réussit pas dans l'ajout sous le navigateur TT, et je n'ai pas encore essayé d'autres navigations. Voici une autre façon d'écrire:
function getDeptList () {var ddlcityType = document.getElementById ("ddlcityType"); var ddlposition = document.getElementyid ("ddlPosition"); var v = ddlcityType.options [ddlcityType.Selectedindex]; // alert (v.value); DeptList = invité_userregister.getDeptList (v.Value) .Value; var deptList = new Array (); DeptList = DeptList.split (';'); for (var i = 0; i <deptList.length; i ++) {if (DeptList [i]! = "") {Var Dept = Deptlist [i]. document.CreateElement ("Option"); Opt.InnerHtml = Dept [1]; Opt.Value = Dept [0]; ddlPosition.InsertFore (Opt, ddlPosition.FirstChild);}}}} fonction deLloption () {var ddluserschool = Document.getElementCyid ("ddluserschool"); vare while (num> 0) {for (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} function getSCHOolList () {deLoption (); var ddlprovincy = document.getElementyid ("ddlprovincin"); document.getElementById ("ddluserschool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptList = invité_usergister.getschoollist (v.value) .value; var deptList = new Array (); DeptList = DeptList.split (';'); pour (var (var i = 0; i <deptList.length; i ++) {if (deptList [i]! = "") {var dept = deptList [i] .split (','); var opt = document.createElement ("option"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddluserschool.insertfore (opt, ddluserschool.firstchild);}}}}