[ JS ] <select> Zeile(n) ausblenden? (Gruppierung)

ev0lst · 8. September 2007

Hallo.

Hier zu meinem Vorhaben.

Ich habe ein Select mit bestimmten Werten, sagen wir mal Wert A, Wert B und Wert C.

Nun habe ich noch ein Select mit bestimmten einträgen, bezugnehmend auf das erste Feld.
Nun will ich es so machen, dass z.B. wenn bei bem ersten <select> Wert A gewählt wird und bei dem zweiten Feld entsprechend Einträge (<option>) augeblendet werden, also nicht mehr zur Verfügung stehen (Disabled geht natürlich auch, wenn es mit allen Browsern geht

)

Die Fragen die ich mir stelle sind:

Geht sowas mit allen Browsern?
Disabled oder display:none? (CSS)
Wie mache ich es, wenn mehrere Einträge aus dem zweiten Feld gelöscht werden müssen? (Gruppierung?)

Quaese · 10. September 2007

Hi,

sicherlich ist soetwas realisierbar. Ist nur eine Frage, wie die Arrays zum Füllen des zweiten bzw. dritten Selectfelds
umgesetzt werden.

Im Beispiel wird das zweite Select über das Array arrSndSel gefüllt. Dieses enthält passend zum gewählten
Index des ersten Feldes immer Wertepaare. Der erste Teil gibt den Namen wieder, der zweite den Value.
Zweiter dient auch als Index für den Array arrThirdSel. Wie der Name schon vermuten lässt, dient dieser
zum Füllen des letzten Selectfeldes.

Code:

<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 arrSndSel = new Array();
// Form: [n][i][0] = Text in Select 2, [n][i][1] = Value in Select 2 = Index in Füllarray für Select 3
//        n: Ausgewählter Index (selectedIndex) aus Select 1
//        i: Laufindex für Optionen in Select 2
arrSndSel[0] = [["Anna", 0], ["August", 1], ["Andrea", 0], ["Albert", 1]];
arrSndSel[1] = [["Bertram", 1], ["Brunhilde", 0], ["Beate", 0]];
arrSndSel[2] = [["Christian", 1], ["Celest", 0], ["Carola", 0]];

arrThirdSel = new Array();
arrThirdSel[0] = new Array("Anna", "Andrea", "Brunhilde", "Beate", "Celest", "Carola");
arrThirdSel[1] = new Array("August", "Albert", "Bertram", "Christian");


function changeSecond(objSel){
  var objSelChange = document.getElementById("sel_02");
  var intValue;
  var blnChk;

  objSelChange.length = 0;  // Einträge in Sel 2 löschen

  // Array mit neuen Optionen durchlaufen
  for(var i=0; i<arrSndSel[objSel.selectedIndex].length; i++){
    // Falls es die erste Option ist -> selektieren und Wert für Sel 3 merken
    if(i==0){
      blnChk = true;
      intValue = arrSndSel[objSel.selectedIndex][i][1];
    }else{
      blnChk = false;
    }
    // Neue Option erstellen (Text, Value, defaultSelected, selected)
    var objOption = new Option(arrSndSel[objSel.selectedIndex][i][0], arrSndSel[objSel.selectedIndex][i][1], false, blnChk);
    // Neue Option an Ende einhängen
    objSelChange.options[objSelChange.length] = objOption;
  }

  // Dritte Sel-Box updaten
  changeThird(intValue);

  // Zweite und dritte Box sichtbar machen
  document.getElementById("sel_02").style.display = "inline";
  document.getElementById("sel_03").style.display = "inline";
}


function changeThird(intValue){
  var objSelChange = document.getElementById("sel_03");

  objSelChange.length = 0;  // Einträge in Sel 3 löschen

  // Array mit Optionen für Sel 3 durchlaufen
  for(var i=0; i<arrThirdSel[intValue].length; i++){
    // Falls es sich um den ersten Eintrag handelt -> selektieren
    var blnChk = (i==0)? true : false;
    // Neue Option erstellen und einhängen
    var objOption = new Option(arrThirdSel[intValue][i], arrThirdSel[intValue][i], false, blnChk);
    objSelChange.options[objSelChange.length] = objOption;
  }
}
 //-->
</script>
</head>
<body>
<select id="sel_01" onchange="changeSecond(this);">
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
</select>
<select id="sel_02" style="display: none;" onchange="changeThird(this.options[this.selectedIndex].value);">
  <option value=""></option>
</select>
<select id="sel_03" style="display: none;">
  <option value=""></option>
</select>

</body>
</html>

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese

[ JS ] <select> Zeile(n) ausblenden? (Gruppierung)

ev0lst

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge