Bitte warten...

Kleine JavaScript-Helfer

Übersicht
CSS deaktivieren
Abhängige Auswahllisten
Dropdown-Liste als Navigationsmenü

Dies ist eine kleine Sammlung von Code-Schnipseln, die einem gelegentlich das Leben mit JavaScript leichter machen können.

CSS deaktivieren

Folgendes Skript am Ende einer HTML-Datei deaktiviert

<link>-Elemente mit Attribut rel="stylesheet"
<style>-Elemente
• Attribute style

Code auswählen
1
2
3
4
5
    <script>
      for (css of document.querySelectorAll("link[rel=stylesheet]")) css.outerHTML = "";
      for (css of document.querySelectorAll("style")) css.outerHTML = "";
      for (css of document.querySelectorAll("[style]")) css.removeAttribute("style");
    </script>

Abhängige Auswahllisten

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:

Code 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>
      /* <![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>updateSelect(3, 1, 2);</script>
      <noscript>Um das Auswahlmenü verwenden zu können, muss JavaScript aktiviert werden.</noscript>
    </form>
  </body>
</html>

Dropdown-Liste als Navigationsmenü

Möchte man statt vieler Links, die unter Umständen das Layout einer Seite überfordern, die Navigation einer Seite in eine kleine Dropdown-Liste verlagern, so geht das mit der Funktion window.location.href, die über den Eventhandler onchange innerhalb des <select>-Tags aufgerufen wird, sobald vom Benutzer ein neues Element in der Liste gewählt wird.

Der Eigenschaft window.location.href wird dann der Wert
document.forms.navi.links.options[n].value zugewiesen, wobei
n = document.forms.navi.links.options.selectedIndex ist.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <form id='navi' action='./test.htm' method='post'>
      <select name='links' onchange='window.location.href=document.forms.navi.links.options[document.forms.navi.links.options.selectedIndex].value;'>
        <option value=''>Wohin soll es gehen?</option>
        <option value='./test.htm'>Anfang</option>
        <option value='./test.htm?content=1'>Seite 1</option>
        <option value='./test.htm?content=2'>Seite 2</option>
        <option value='./test.htm?content=3'>Seite 3</option>
        <option value='https://de.wikipedia.org/'>Wikipedia</option>
      </select>
    </form>
  </body>
</html>

So richtig elegant ist diese Lösung aber erst dann, wenn man auch eine JavaScript-freie Alternative anbietet, denn wenn beim Besucher JavaScript deaktiviert ist, funktioniert die ganze Navigation nicht mehr, und das ist wohl ein gravierender Mangel. Man kann in diesem Fall den Wert des Menüs über einen ›Go!‹-Button an ein Skript schicken, das aus diesem Wert dann beispielsweise per PHP eine Weiterleitung herstellt:

Code 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
<?php
  if ($_POST['links']) {
    header("Location: ".$_POST['links']);
    exit;
  }
?>
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <form id='navi' action='./test.php' method='post'>
      <select name='links' onchange='window.location.href=document.forms.navi.links.options[document.forms.navi.links.options.selectedIndex].value;'>
        <option value=''>Wohin soll es gehen?</option>
        <option value='./test.php'>Anfang</option>
        <option value='./test.php?content=1'>Seite 1</option>
        <option value='./test.php?content=2'>Seite 2</option>
        <option value='./test.php?content=3'>Seite 3</option>
        <option value='https://de.wikipedia.org/'>Wikipedia</option>
      </select>
      <input type='submit' value='Go!'>
    </form>
  </body>
</html>