Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript implementiert das Hinzufügen und Löschen von Elementen zum Auswahl-Dropdown-Feld

小云云
Freigeben: 2018-01-23 11:18:44
Original
1818 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zum Hinzufügen und Löschen von Elementen zum Auswahl-Dropdown-Feld in JavaScript vorgestellt, wobei die Methoden append() und remove() in jQuery zum dynamischen Bedienen von Formularelementen verwendet werden. Freunde, die sie benötigen, können darauf verweisen . Ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt, wie Sie mithilfe von JavaScript Elemente zum Auswahl-Dropdown-Feld hinzufügen und daraus löschen. Teilen Sie es als Referenz mit allen:

1. Anweisungen

a. Down-Box append()

b. Verwenden Sie die Methode

, um das letzte Element im Dropdown-Feld zu entfernen remove()

2. Beispielquellcode:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript向select下拉框中添加和删除元素</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   /**
    * 向select下拉框中添加子元素
    */
   function addElement()
   {
     //保证不重复添加
     $("#select_p").empty();
     //添加子元素
     $("#select_p").append("<option value=&#39;0&#39;>---请选择---</option><option value=&#39;1&#39;>男</option><option value=&#39;2&#39;>女</option>");
   }
   /**
   * 删除下拉框中最后一个元素
   */
   function removeLast()
   {
     //删除最后一个子元素
     $("#select_p option:last").remove();
   }
</script>
</head>
<body>
</body>
  <p id="select_span">
     <select id="select_p" style="width:145px;">
     </select>
  </p>
  <input type="button" value="添加元素" onclick="addElement()"/>
  <input type="button" value="删除元素" onclick="removeLast()"/>
</html>
Nach dem Login kopieren

3. Implementierungsergebnisse

(1) Während der Initialisierung

( 2) Elemente hinzufügen

(3) Element löschen

Verwandte Empfehlungen:

jQuery generiert dynamisch den Implementierungscode für die Auswahloptions-Dropdown-Liste

Die richtige Art, jQuery Tree Multiselect zu verwenden

jQuery implementiert den Auswahl-Dropdown- Unten im Feld, um den aktuell ausgewählten Text abzurufen

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Hinzufügen und Löschen von Elementen zum Auswahl-Dropdown-Feld. 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