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

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

伊谢尔伦
伊谢尔伦Original
2017-07-24 10:46:082836Durchsuche

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;

(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; 
}

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>

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;

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

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=""; 
} 
}

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; 
} 
}
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
Methode 2:


obj.selectedIndex = 2;
Methode 3:


obj.value="你要设的数值。"//Dropdownlist就会自动把那个值设为当前。 
javascript清除dropdownlist的项
//清除原有项 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0) 
{ 
drp1.options.remove(0); 
} 
}
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!

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