Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung spezifischer Anwendungsbeispiele der Javascript-Manipulation des DropDownList-Steuerelements

Ausführliche Erläuterung spezifischer Anwendungsbeispiele der Javascript-Manipulation des DropDownList-Steuerelements

伊谢尔伦
Freigeben: 2017-07-24 10:46:08
Original
2855 Leute haben es durchsucht

Um das DropDownList-Steuerelement mit Javascript zu bearbeiten, müssen Sie zunächst die beiden grundlegendsten Attribute von select (oder DropDownList) verstehen: eines ist das Wertattribut, das andere ist das Textattribut und das selectedIndex-Attribut wird verwendet Um den aktuell ausgewählten Artikel (Nummer) zu identifizieren, sehen Sie sich bitte den Beispielcode oben an.

Kommen wir zur Sache und stellen hauptsächlich die folgenden Punkte vor:
(1) Löschen Sie den Wert im DropDownList-Steuerelement.   

document.getElementById('ddlCities').options.length = 0;
Nach dem Login kopieren

(2) Bestimmen Sie, ob in der DropDownList ein ListItem mit dem Wert „Param1“ vorhanden ist.

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

JavaScript und DropDownList

Übertragung zwischen Server Control DropDownList und 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>
Nach dem Login kopieren

1. Wie greift das JS-Skript auf den Wert der Serversteuerung zu

Auf der Schnittstelle gibt es ein TextBox-Steuerelement mit der ID als Name. Sie können das folgende Skript verwenden, um den Wert von Name in js abzurufen

var myvalue=document.all(&#39;Name&#39;).value;
Nach dem Login kopieren

2. So erhalten Sie die Serversteuerung in js Der Wert der Variablen
hat sich bisher nicht als besser erwiesen. Die Methode, die ich normalerweise verwende, besteht darin, ein verstecktes Steuerelement HtmlInputHidden auf der Schnittstelle einzufügen und es dann auf Ausführung festzulegen als Serversteuerelement, damit es in JS-Skripten und ASP.NET-Code verwendet werden kann. Sie können auf den Wert des Steuerelements zugreifen
So weisen Sie dem Serversteuerelement in JS einen Wert zu:

var bt=document.all(&#39;Name&#39;).value; 
bt.value=&#39;名称&#39;;
Nach dem Login kopieren

Verwenden Sie Name.Value in ASP.NET, um darauf zuzugreifen.

3. So durchlaufen Sie alle TextBox-Elemente auf der Schnittstelle

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=""; 
} 
}
Nach dem Login kopieren

4. Wählen Sie das Element aus, dessen Wert in der Dropdown-Liste „Ich habe“ ist auswählen"

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; 
} 
}
Nach dem Login kopieren
JS bricht die Auswahl der ListBox-, Select- und DropDownList-Optionen ab


Legen Sie fest, welches Element der Dropdown-Liste das aktuell ausgewählte Element in Javascript ist

Methode 1:


i = 2 
document.all.dropdownlistID.options[i].selected=true
Nach dem Login kopieren
Methode 2:


obj.selectedIndex = 2;
Nach dem Login kopieren
Methode 3:


obj.value="你要设的数值。"//Dropdownlist就会自动把那个值设为当前。 
javascript清除dropdownlist的项
Nach dem Login kopieren
//清除原有项 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0) 
{ 
drp1.options.remove(0); 
} 
}
Nach dem Login kopieren
Dynamische Änderungsmethode (Ermitteln Sie das Geschäftsviertel der Stadt anhand des Stadtcodes und fügen Sie es der DropDownList hinzu)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung spezifischer Anwendungsbeispiele der Javascript-Manipulation des DropDownList-Steuerelements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage