Exemple de contrôle du serveur de contrôle dynamique Javascript_compétences Javascript

Récemment, de nombreuses pages doivent charger des listes déroulantes que les utilisateurs peuvent choisir. À l'origine, les applications étaient chargées côté serveur. Enfin, pour des raisons de logique métier, certaines fonctions de DropDownList doivent être implémentées côté client. Désormais, la fonction de liste déroulante est bien plus agréable à utiliser que de tout mettre côté serveur.

Méthode spécifique :

Mettez un contrôle DropDownList dans la page et ajoutez un élément pour analyser le code HTML qu'il génère. De cette façon, lors de l'utilisation de js pour le contrôle dynamique, ce sera très clair :

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

Afficher dans le navigateur et analyser le HTML : Voici le code HTML généré par le contrôle DropDownList. Ce n'est pas la même chose que la sélection normale

Il y a une différence. Ensuite, vous pouvez remplir, supprimer, sélectionner et d'autres contrôles dynamiquement via js.

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

Vous pouvez supprimer 1 et maintenant ajouter deux contrôles de bouton HTML pour ajouter des options et supprimer toutes les options respectivement. Le code source du bouton est le suivant :

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

L'ajout et la suppression de fonctions ressemblent à ceci :

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

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("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

Affiché dans un navigateur, vous pouvez facilement créer des options déroulantes sélectionnées, et comme celles-ci sont générées par le client, elles sont plus efficaces que le serveur

Code pour le travail secondaire. Mais pour le moment, si vous souhaitez utiliser DropDownList1.SelectedValue pour obtenir les options sélectionnées par l'utilisateur, alors vous devrez

Une erreur s'est produite. En effet, la DropDownList est ajoutée dynamiquement par JS, par conséquent, ses éléments n'appartiennent pas à ViewState et ne sont pas maintenus,

Cela signifie que nous ne pouvons pas le gérer côté serveur. Afin de résoudre ce problème, deux méthodes peuvent être utilisées : 1. Sauvegarde du contrôle caché

Méthode d'option utilisateur ; 2. Méthode Request.Form. (Voir msdn Taste of Ajax)

1. Nous ajoutons un contrôle caché à la page et l'utilisons pour enregistrer les informations sur les modifications de l'option DropDownList, afin que le sens de sélection de l'utilisateur

Après avoir reçu les informations qui vous intéressent, nous pouvons obtenir les informations côté serveur et les traiter pour réaliser raisonnablement la division du travail entre les clients et le service.

Ajouter un événement onchange au contrôle DropDownList A ce moment, 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 :

function 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 :

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

À ce stade, tout le travail est terminé, mais il y a toujours un problème. L'événement change de DropDownList ne peut être utilisé que lorsque l'utilisateur modifie la sélection déroulante

Il ne sera déclenché que lorsque

sera sélectionné. Par conséquent, lorsque l’utilisateur soumet avec les options par défaut, il obtient une valeur nulle. Nous pouvons donc remplir l'option, c'est-à-dire

initialisation cachée. Ajoutez une ligne de code à l'événement addOption comme suit :

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

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);

}
document.getElementById("HiddenField1").value = optValue[0];
}

Cependant, la partie rouge ci-dessus ne fonctionne pas dans ADD sous le navigateur TT. Je ne l'ai pas essayée dans d'autres navigateurs. Voici une autre façon de l'écrire :

.

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_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].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
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=Guest_UserRegister.GetSchoolList(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].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}