JavaScript select onChange soll <h2> Element aendern

Julexander

Lieutenant
Dabei seit
Juli 2004
Beiträge
568
Ich hab ein <select> Element mit 3 Optionen in meiner Form, und moechte nun,
wenn der User eine Option waehlt, dass bei einem h2 Element und einem span Element mit einer bestimmten ID der Text geaendert wird.
Ich brauche also fuer jede Option ein if und ich muss die Elemente irgendwie ansprechen. (Ich weiss schon dass das mit document.getElementbyId funktioniert).
Habe leider kA von Javascript, Java verstehe ich.

Danke fuer hilfe!
 
M

Mr. Snoot

Gast
Habe vor Jahren mal was ähnliches gebraucht:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      function wechsel()
      {
        var option  = document.formular.auswahl.selectedIndex;
        var heading = document.getElementById("heading");
        var text    = document.getElementById("text");

        switch (option)
        {
          case 1:
            heading.innerHTML = "alternative Überschrift 1";
            text.innerHTML    = "alternativer Text 1";
            break;
          case 2:
            heading.innerHTML = "alternative Überschrift 2";
            text.innerHTML    = "alternativer Text 2";
            break;
          case 3:
            heading.innerHTML = "alternative Überschrift 3";
            text.innerHTML    = "alternativer Text 3";
            break;
          default:
            heading.innerHTML = "Überschrift";
            text.innerHTML    = "Text";
            break;
        }
      }
    </script>
  </head>

  <body>

    <form name="formular">
      <select name="auswahl" onchange="wechsel()">
        <option value="0">-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>

    <h2 id="heading">Überschrift</h2>

    <span id="text">Text</span>

  </body>

</html>
 
Zuletzt bearbeitet:
Top