JavaScript Select-Box manipulieren

Durch JavaScript Optionen einer HTML Select-Box ändern- und auslesen, hinzufügen- und löschen.



HTML Select-Box per JavaScript manipulieren

In diesem Artikel lernen Sie, wie man anhand JavaScript in HTML Select-Boxen selektierte Einträge auslesen kann, einen bestimmten Eintrag als selektiert definieren kann, neue Einträge erstellen und auch wieder löschen kann.

 

// HTML Select-Box
 
<select id="box" name="mySelectBox">
   <option value="null">null</option>
   <option value="eins" selected>one</option>
   <option value="zwei">two</option>
   <option value="drei">three</option>
</select>
 
Selektierten Eintrag ermitteln und abändern 
<script type="text/javascript">
 
  // Index des selektierten Eintrags ermitteln
  var opt = document.getElementById("box").selectedIndex;
  alert(opt); // Ausgabe: 1
 
 
  // Ausgabetext des selektierten Eintrags ermitteln
  alert(document.getElementById("box").options[opt].text);
  // Ausgabe: one
 
 
  // Wert des selektierten Eintrags ermitteln
  alert(document.getElementById("box").options[opt].value);
  // Ausgabe: eins
 
 
  // Neuen Index als selektiert definieren
  var option = document.getElementById("box").selectedIndex = 2;
 
</script>
 
Wert und Text dynamisch ändern 
<script type="text/javascript">
 
  // Wert und Text der SelectBox neu zuweisen
  document.getElementById("box").options[1].text = "new one";
  document.getElementById("box").options[1].value = "neue eins";
 
 
  // geänderte Daten ermitteln
  var option = document.getElementById("box").selectedIndex;
 
  alert(document.getElementById("box").options[opt].text);
  // Ausgabe: new one
 
  alert(document.getElementById("box").options[opt].value);
  // Ausgabe: neue eins
 
</script>
Eintrag neu erstellen und wieder löschen 
<script type="text/javascript">
 
  // Neuen Datensatz hinzufügen
  document.getElementById("box").options[4] = new Option("vier", "four");
 
 
  alert(document.getElementById("box").options[4].text);
  // Ausgabe: four
 
  alert(document.getElementById("box").options[4].value);
  // Ausgabe: vier
 
 
  // Neu hinzugefügten Datensatz wieder löschen
  document.getElementById("box").options[4] = NULL;
 
</script>