Kleine JavaScript-Helfer

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 kopieren

    <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 55 werden die Indizes der Optionen an die Funktion updateSelect() übergeben, die vorausgewählt werden sollen. In diesem Fall die Option 2 der ersten Liste, die Option 0 der zweiten Liste sowie die Option 1 der dritten Liste, wobei die Zählung mit 0 beginnt.

Hier der Quelltext dazu:

Code kopieren

<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Abhängige Auswahllisten mit JavaScript</title>
    <meta charset='UTF-8'>
    <script>
      /* <![CDATA[ */
      function updateSelect(selects) {
        var music = [];
        music.push([
          "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.push([
          "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.push([
          "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’"]]
        ]);
        
        cats = [
          music,
          music[+selects[0]],
          music[+selects[0]][+selects[1] + 1][1]
        ];
        for (s = 0; s < selects.length; s++) {
          parentElement = document.getElementById(["genre", "artist", "album"][s]);
          parentElement.innerHTML = null;
          cond = +(s == 1);
          for (i = cond; i < cats[s].length; i++) {
            newChild = document.createElement('option');
            newChild.setAttribute('value', i - cond);
            if (i - cond == selects[s]) newChild.setAttribute('selected', '');
            newChild.innerHTML = (s == selects.length - 1 ? cats[s][i] : cats[s][i][0]);
            parentElement.appendChild(newChild);
          }
        }
      }
      /* ]]> */
    </script>
  </head>
  <body>
    <select id='genre'  onchange='updateSelect([this.value, 0, 0]);'></select>
    <select id='artist' onchange='updateSelect([genre.value, this.value, 0]);'></select>
    <select id='album'></select>
    <script>updateSelect([2, 0, 1]);</script>
    <noscript>Um das Auswahlmenü verwenden zu können, muss JavaScript aktiviert werden.</noscript>
  </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 Eigenschaft 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 (die aktuelle URL) wird dann der Wert
this.value zugewiesen, wobei dies dem Wert der gewählten Option entspricht.

Code kopieren

<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>
    <style>
      body { background-color:#abc; }
    </style>
  </head>
  <body>
    <select onchange='window.location.href=this.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>
  </body>
</html>