decocode decocode deco    

Abhängige Auswahllisten mit JavaScript #

Manchmal ist es notwendig, die Inhalte von HTML-Auswahllisten in Abhängigkeit von der Auswahl aus einer anderen Liste dynamisch zu ändern. Ein Formular für die Angabe eines Datums bietet beispielsweise jeweils eine Auswahlliste für Tag, Monat und Jahr des Datums an. Die Anzahl der Tage variiert aber in Abhängigkeit von dem gewählten Monat, da ein Monat zwischen 28 und 31 Tagen haben kann. Damit der Benutzer nicht das Datum 31. Februar auswählen kann, muss der Inhalt der entsprechenden Liste angepasst werden.

In dem auf dieser Seite vorgestellten Code-Beispiel werden drei Auswahllisten für die Auswahl eines Musikalbums generiert. Über die erste Liste kann das Musikgenre gewählt werden. In der zweiten Liste werden entsprechend der Genrewahl die zugehörigen Künstler angezeigt. Hat man aus dieser Liste einen bestimmten Künstler gewählt, so wird in der dritten Liste eine Auswahl der Musikalben des Künstlers angezeigt.

In Zeile 71 werden die Indizes der Optionen an die Funktion updateSelect() übergeben, die vorausgewählt werden sollen. In diesem Fall die Option 3 der ersten Liste, die Option 1 der zweiten Liste sowie die Option 2 der dritten Liste.

Hier der Quelltext dazu:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Abhängige Auswahllisten mit JavaScript</title>
    <meta charset='UTF-8'>
    <script type='text/javascript'>
      /* <![CDATA[ */
      function updateSelect(genre, artist, album) {
        var music = [];
        music[1] = [
          "Rock",
          ["Nirvana", "1989 Bleach", "1991 Never Mind", "1992 Incesticide"],
          ["Metallica", "1983 Kill ’Em All", "1984 Ride the Lightning", "1986 Master of Puppets"],
          ["The Offspring", "1989 The Offspring", "1992 Ignition", "1994 Smash", "1997 Ixnay on the Hombre"],
          ["Deep Purple", "1968 Shades of Deep Purple", "1968 The Book of Taliesyn", "1969 Deep Purple"]
        ];
        music[2] = [
          "Pop",
          ["Justin Bieber", "2010 My World 2.0", "2011 Under the Mistletoe", "2012 Believe"],
          ["Miley Cyrus", "2007 Meet Miley Cyrus", "2008 Breakout", "2010 Can’t Be Tamed"],
          ["Lady Gaga", "2008 The Fame", "2011 Born This Way"]
        ];
        music[3] = [
          "Hip-Hop",
          ["Beastie Boys", "1986 Licensed to Ill", "1989 Paul’s Boutique", "1992 Check Your Head"],
          ["Snoop Dogg", "1993 Doggystyle", "1996 Tha Doggfather", "1998 Da Game Is to Be Sold Not to Be Told"],
          ["Vanilla Ice", "1989 Hooked", "1990 To the Extreme", "1994 Mind Blowin’"]
        ];
        
        // populate select 'genre'
        var parentElement = document.getElementById('genre');
        parentElement.innerHTML = null;
        for (var i = 1; i < music.length; i++) {
          var newChild = document.createElement('option');
          newChild.setAttribute('value', i);
          if (i == genre) newChild.setAttribute('selected', 'selected');
          newChild.innerHTML = music[i][0];
          parentElement.appendChild(newChild);
        }
        
        // populate select 'artist'
        var parentElement = document.getElementById('artist');
        parentElement.innerHTML = null;
        for (var i = 1; i < music[genre].length; i++) {
          var newChild = document.createElement('option');
          newChild.setAttribute('value', i);
          if (i == artist) newChild.setAttribute('selected', 'selected');
          newChild.innerHTML = music[genre][i][0];
          parentElement.appendChild(newChild);
        }
        
        // populate select 'album'
        var parentElement = document.getElementById('album');
        parentElement.innerHTML = null;
        for (var i = 1; i < music[genre][artist].length; i++) {
          var newChild = document.createElement('option');
          newChild.setAttribute('value', i);
          if (i == album) newChild.setAttribute('selected', 'selected');
          newChild.innerHTML = music[genre][artist][i];
          parentElement.appendChild(newChild);
        }
      }
      /* ]]> */
    </script>
  </head>
  <body>
    <form name='music' action='select.php' method='get' accept-charset='utf-8'>
      <select name='genre'  id='genre'  onchange='updateSelect(document.forms.music.genre.options.selectedIndex + 1, 1, 1);'></select>
      <select name='artist' id='artist' onchange='updateSelect(document.forms.music.genre.options.selectedIndex + 1, document.forms.music.artist.options.selectedIndex + 1, 1);'></select>
      <select name='album'  id='album'></select>
      <script type='text/javascript'>updateSelect(3, 1, 2);</script>
      <noscript>Um das Auswahlmenü verwenden zu können, muss JavaScript aktiviert werden.</noscript>
    </form>
  </body>
</html>