autom. Drop Down Anpassung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • autom. Drop Down Anpassung

    Hi Leuts...

    folgende Stelle bereitet mir gerade Kopfzerbrechen :

    Ich habe verschiedene Kategorien in DB - welchen verschiedene Werte zugeordnet sind ...

    jetzt will ich ein Formular welches folgendes bewerkstelligt ..

    zuerst wählt man die Hauptkategorie aus DB ... z.B. Hobbys, Beruf...

    wählt man nun dies per Drop Down aus ... wird das Drop Down mit den Unterkategorien automatisch angepasst... also gibt es bei Hobbys / dann nur mehr Laufen,Klettern zur Auswahl ..

    sämtliche Optionen werden aus einer DB geholt .. nur weiss ich nicht wie man diese "Dynamik" hinbekommt !

    Könnte es mir bitte jemand erklären bzw. einen Code dazu posten ?

    danke
    MfG
    Wunki

  • #2
    Hi Du,


    schreib Dir mal die Daten die aus der Datenbank kommen in ein HiddenField und les sie dann JavaScript-seitig aus. Daraus kannst Du Dir dann Arrays erzeugen, die Du bei onChange der ComboBox in die der Unterpunkte schreibst.

    Grüße, Marcus.

    Kommentar


    • #3
      dynamisch nachladen geht mit PHP leider nicht, wirst das machen müssen, wie es kimpenhaus beschreibt...

      hier mal ein beispiel (NS und Opera sind auskommentiert)

      PHP-Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

      <
      html>
      <
      head>
          <
      title>MouseOver</title>
          <
      script language="JavaScript">
              function 
      init() {
                  
      //Browser IE
                      
      document.all.messeauswahl0.style.visibility "hidden"
                      
      document.all.messeauswahl1.style.visibility "hidden"
                      
      document.all.messeauswahl2.style.visibility "hidden"
                      
      document.all.messeauswahl3.style.visibility "hidden"
                  
      //Browser NS
                      /*document.messeauswahl0.visibility = "hidden"
                      document.messeauswahl1.visibility = "hidden"
                      document.messeauswahl2.visibility = "hidden"
                      document.messeauswahl3.visibility = "hidden"*/
                  //Browser Opera        
                      /*document.getElementById("messeauswahl0").style.visibility = "hidden"
                      document.getElementById("messeauswahl1").style.visibility = "hidden"
                      document.getElementById("messeauswahl2").style.visibility = "hidden"
                      document.getElementById("messeauswahl3").style.visibility = "hidden"*/
                  
              
      }
              function 
      messeauswahl(n) {
                  for (var 
      i=0i<=3i++) {
                      var 
      visi = (i==n) ? "visible" "hidden"
                      
      //Browser IE
                      
      document.all("messeauswahl"+i).style.visibility visi
                      
      //Browser NS
                      //document.layers["messeauswahl"+i].visibility = visi
                      //Browser Opera    
                      //document.getElementById("messeauswahl"+i).style.visibility = visi
                      
                  
      }
              }
          </
      script>
      </
      head>

      <
      body onload="init()">


      <
      br><br><br><br><br><br><br>

      <
      form>

      <
      select size="1" name="selectauswahl" onChange="messeauswahl(this.form.selectauswahl.options[this.form.selectauswahl.options.selectedIndex].value)"
      <
      option value="0">[ Messe auswählen ]</option>
      <
      option value="1">Messe 1</option
      <
      option value="2">Messe 1</option
      <
      option value="3">Messe 2</option
      </
      select




      <
      span id="messeauswahl0" style="position:absolute">bei default kein selectfeld</span>
      <
      span id="messeauswahl1" style="position:absolute">
      <
      select name="test1">
          <
      option value="wert1">Datum1-2</option>
          <
      option value="wert2">Datum1-2</option>
      </
      select>
      </
      span>
      <
      span id="messeauswahl2" style="position:absolute">
      <
      select name="test2">
          <
      option value="wert1">Datum2-1</option>
          <
      option value="wert2">Datum2-2</option>
      </
      select></span>
      <
      span id="messeauswahl3" style="position:absolute">
      <
      select name="test3">
          <
      option value="wert1">Datum3-1</option>
          <
      option value="wert2">Datum3-2</option>
      </
      select>
      </
      span>

      <
      form>
      </
      body>
      </
      html
      gruss

      Kommentar


      • #4
        wow... was soll ich sagen - ein riesiges Danke !

        kurze frage hätte ich da noch - wie kann ich solche Browserspezifishce Abfragen realisieren .. so dass wenn einer Opera hat - dieser Code verwendet wird ? .. bin leider ein totaler JS noop

        Kommentar


        • #5
          ja, der nicht auskommentierte Code ist für den IE, dann jeweils noch einmal für den NS und Opera (beide auskommentiert!)

          baust die ne Browserabfrage z.B. per PHP und dann läßt du nur die benötigten Codeteile ausgeben!

          gruss

          Kommentar


          • #6
            danke nochmal ... jetzt funzt es!

            Kommentar

            Lädt...
            X