✔ Option-Feld löschen klappt nicht

J

janomerico

Erfahrenes Mitglied
Hallo,

Ich habe eine Seite, wo der Wert des einen Select-Felds die Auswahloptionen des zweiten Select-Felds bestimmt. Da je nach Auswahl unterschiedlich viele Auswahlmöglichkeiten im zweiten Select-Feld bestehen, muss ich vorher erstelle Option-Zeilen, die nicht überflüssig sind und nicht überschrieben werden, löschen.

document.Eingabeformular.Unterkategorie.options[6].style.display = 'none';

So habe ich es versucht, jedoch hat es nicht geklappt ...

document.Eingabeformular.Unterkategorie.options[6] = null;

Habe ich auch versucht, geht aber genausowenig ... :(

Hier noch ein grösserer Ausschnitt des Scripts, falls das hilft:

Code: 
 if(document.Eingabeformular.Hauptkategorie.selectedIndex == 1){
  document.Eingabeformular.Unterkategorie.options[1] = new Option("Licht und Schatten");
  document.Eingabeformular.Unterkategorie.options[2] = new Option("Reflexion, Spiegelbilder");
  document.Eingabeformular.Unterkategorie.options[3] = new Option("Prismen und Linsen");
  document.Eingabeformular.Unterkategorie.options[4] = new Option("Optische Instrumente");
  document.Eingabeformular.Unterkategorie.options[5] = new Option("Farben und Spektren"); 
  document.Eingabeformular.Unterkategorie.options[6].style.display = 'none'; 
  document.Eingabeformular.Unterkategorie.options[7].style.display = 'none'; }

 if(document.Eingabeformular.Hauptkategorie.selectedIndex == 2){
  document.Eingabeformular.Unterkategorie.options[1] = new Option("Magnete");
  document.Eingabeformular.Unterkategorie.options[2] = new Option("Elektronen und Atome");
  document.Eingabeformular.Unterkategorie.options[3] = new Option("Ströme");
  document.Eingabeformular.Unterkategorie.options[4] = new Option("Elektrische Schaltungen");
  document.Eingabeformular.Unterkategorie.options[5] = new Option("Strom, Spannung, Widerstand");
  document.Eingabeformular.Unterkategorie.options[6] = new Option("Elektromagnete");
  document.Eingabeformular.Unterkategorie.options[7] = new Option("Elektrische Leistung"); }

Falls es an der Ansprech-Art der Option-Felder liegt ... also ich habe es auch versucht mit:

document.getElementsByName("Unterkategorie")[5].style.display = 'none';

Aber daran lage es nicht ...
 
Zuletzt bearbeitet:
Hi,

Du kannst ein mehrdimensionales Array erstellen, das für jede Unterkategorie einen eigenen Index besitzt. Dieser Index
entspricht dem ausgewählten Index (selectedIndex) der Hauptkategorie.

Wird nun die Hauptkategorie geändert, wird im onchange-Event eine Funktion mit dem gewählten Index als Parameter
aufgerufen. Hier werden zunächst alle Optionen der Unterkategorie entfernt. Anschliessend wird das Array mit Hilfe des
übergebenen Indexwertes an der entsprechenden Stelle durchlaufen, die Optionen neu angelegt und in die
Select-Gruppe eingehängt.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
  <!--
var arrSub = new Array();

arrSub[0] = new Array("Hauptkategorie wählen");
arrSub[1] = new Array("Licht und Schatten",
                      "Reflexion, Spiegelbilder",
                      "Prismen und Linsen",
                      "Optische Instrumente",
                      "Farben und Spektren");
arrSub[2] = new Array("Magnete",
                      "Elektronen und Atome",
                      "Ströme",
                      "Elektrische Schaltungen",
                      "Strom, Spannung, Widerstand",
                      "Elektromagnete",
                      "Elektrische Leistung");

function updateSub(intIndex){
  var objSub = document.Eingabeformular.Unterkategorie;

  // Optionen löschen
  objSub.options.length = 0;

  // Select-Gruppe neu aufbauen
  for(var i=0; i<arrSub[intIndex].length; i++){
    objSub.options[objSub.length] = new Option(arrSub[intIndex][i], arrSub[intIndex][i], false, true);
  }
}
 //-->
</script>

</head>
<body>
<form name="Eingabeformular" action="#" method="get">
  <select name="Hauptkategorie" onchange="updateSub(this.selectedIndex);">
  	<option value="0">wählen</option>
  	<option value="1">1</option>
  	<option value="2">2</option>
  </select>
  <select name="Unterkategorie">
  	<option>Hauptkategorie wählen</option>
  </select>
</form>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück