Explication détaillée d'exemples d'utilisation spécifiques de manipulation javascript du contrôle DropDownList-js tutoriel-php.cn

Explication détaillée d'exemples d'utilisation spécifiques de manipulation javascript du contrôle DropDownList

伊谢尔伦

Libérer： 2017-07-24 10:46:08

original

2855 Les gens l'ont consulté

Pour utiliser javascript pour manipuler le contrôle DropDownList, vous devez d'abord comprendre les deux attributs les plus fondamentaux de select (ou DropDownList), l'un est l'attribut value, l'autre est l'attribut text et l'attribut selectedIndex est utilisé. pour identifier l'élément actuellement sélectionné (numéro), veuillez vous référer à l'exemple de code ci-dessus pour plus de détails.

Passons aux choses sérieuses, en introduisant principalement les points suivants :
(1) Effacez la valeur dans le contrôle DropDownList. 　　

document.getElementById(&#39;ddlCities&#39;).options.length = 0;

Copier après la connexion

(2) Déterminez s'il existe un ListItem avec la valeur 'Param1' dans DropDownList.

function isListItemExist(objDdl , objItemValue) 
{ 
var isExist = false; 
for(var i in objSelect.options) 
　　{ 
　　　　if(i.value == objItemValue) 
　　　　{ 
　　　　　　isExist = true; 
　　　　　　break; 
　　　　} 
　　} 
　　return isExist; 
}

Copier après la connexion

JavaScript et DropDownList

Transfert entre le contrôle serveur DropDownList et Javascript

<script language="javascript"> 
function hehe() 
{ 
document.all(&#39;txtSdept&#39;).value =document.all(&#39;ddlSdept&#39;).options[document.all(&#39;ddlSdept&#39;).selectedIndex].text; 
} 
</script> 
<asp:DropDownList id="ddlSdept" style="Z-INDEX: 101; LEFT: 240px; POSITION: absolute; TOP: 112px" onchange="hehe()" runat="server"> 
<asp:ListItem Value="1">计算机系</asp:ListItem> 
<asp:ListItem Value="2">机械系</asp:ListItem> 
<asp:ListItem Value="3">电子系</asp:ListItem> 
<asp:ListItem Value="4">英语系</asp:ListItem> 
<asp:ListItem Value="5">中文系</asp:ListItem> 
</asp:DropDownList> 
<asp:TextBox id="txtSdept" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 112px" runat="server"></asp:TextBox>

Copier après la connexion

1. Comment le script js accède-t-il à la valeur du contrôle serveur

🎜>

Il y a un contrôle TextBox sur l'interface avec l'ID comme Name Vous pouvez utiliser le script suivant pour obtenir la valeur de Name en js

var myvalue=document.all(&#39;Name&#39;).value;

Copier après la connexion

2. Comment obtenir le contrôle du serveur dans js La valeur de la variable
ne s'est pas révélée meilleure jusqu'à présent. La méthode que j'utilise habituellement consiste à placer un contrôle caché HtmlInputHidden sur l'interface, puis à le configurer pour qu'il s'exécute. en tant que contrôle serveur, afin qu'il puisse être utilisé dans les scripts js et le code ASP.NET Vous pouvez accéder à la valeur du contrôle
Pour attribuer une valeur au contrôle serveur en js :

var bt＝document.all(&#39;Name&#39;).value; 
bt.value=&#39;名称&#39;;

Copier après la connexion

<🎜. >

Utilisez Name.Value dans ASP.NET pour y accéder.

3. Comment parcourir tous les éléments TextBox sur l'interface

var inputList = document.body.getElementsByTagName("INPUT"); 
for(var i=0;i<inputList.length;i++) 
{ 
if(inputList.disabled==false && (inputList.type==&#39;text&#39; || inputList.type==&#39;password&#39;)) 
{ 
inputList.value=""; 
} 
}

Copier après la connexion

4. Laissez la liste déroulante sélectionner l'élément spécifié
Sélectionnez l'élément dont la valeur dans la liste déroulante est "J'ai". choisir"

var handl=document.all(&#39;List1&#39;); 
var my_value=&#39;我得选择&#39;; 
for(var index=0;index<handle.options.length;index++) 
{ 
if(handle.options[index].text==my_value) 
{ 
handle.selectedIndex=index; 
} 
}

Copier après la connexion

JS annule la sélection des options ListBox, Select, DropDownList

Définir quel élément de la liste déroulante est l'élément actuellement sélectionné en javascript

méthode 1 :

i = 2 
document.all.dropdownlistID.options[i].selected=true

Copier après la connexion

Méthode 2 :

obj.selectedIndex = 2;

Copier après la connexion

Méthode 3 :

obj.value="你要设的数值。"//Dropdownlist就会自动把那个值设为当前。 
javascript清除dropdownlist的项

Copier après la connexion

//清除原有项 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0) 
{ 
drp1.options.remove(0); 
} 
}

Copier après la connexion

Méthode de changement dynamique (Obtenez le quartier des affaires de la ville en fonction du code de la ville et ajoutez-le à la DropDownList)

function getsyq() 
{ 
var city = document.getElementById("DropDownList_Cities").value;　　//取得城市代码 
var htp = new ActiveXObject("Msxml2.XMLHTTP"); 
var drp1 = document.getElementById("drp1");　 
var url = "?stat=1&city="+city　　 
htp.open("post",url,true) 
htp.onreadystatechange=function() 
{ 
if(htp.readyState==4) 
{ 
　　　clearitem(); //清除原有下拉项 
var str = htp.responseText; 
var opt = str.split(&#39;,&#39;); 
var s = opt.length 
for(var j = 0;j<s;j++) 
{ 
var newOption = document.createElement("OPTION"); 　　//定义一个新的项 
var ff = opt[j].split(&#39;|&#39;); 
　　 newOption.text = ff[1]; 
　　 newOption.value = ff[1]; 
　　 drp1.options.add(newOption); 
　 } 
} 
} 
htp.send() 
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!