kostenloser Webspace werbefrei: lima-city


Sichtbar bzw unsichtbar

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    leopold2104

    leopold2104 hat kostenlosen Webspace.

    Hallo Liebe Leute,

    ich möchte ein Dropdown erstellen wo nach der auswahl ein bestimmter inhalt angezeigt wird.
    Ich habe vieles Probiert aber ich bekomm es einfach nicht auf die Reihe, vll. könnt ihr mir einen
    anstoß geben.

    Das ganze sollte am ende so aussehen:
    Ich habe ein dropdown (auswahlt1, auswahl2, auswahl3)
    wenn ich nun einwas auswähle sollen die zu der auswahl passenden
    erweiterten einstellungen erscheinen.

    wie bekomme man das hin und wie fängt man am besten damit an?

    Danke :)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hi Leopold

    Sind denn die passenden Erweiterungen bereits im HTML-Dokument vorhanden, oder müssen diese noch von der Datenbank geladen werden?
    Sollte letzteres der Fall sein, müsstest du dich mit AJAX auseinander setzen, das ermöglicht das asynchrone laden von Daten (z.B. wie bei Google die Vorschlagsliste).

    Sollte ersters der Fall sein, kannst du ja auf die select-Box eine Javascript-Funktion setzen:
    onchange="andere_inhalt();"

    Danach in der Funktion andere_inhalt einfach mit einer if-Abfrage die Werte durchgehen und jeweils den gewünschten Bereich mittels der Style-Eigenschaft display: auf inline oder block setzen (und entsprechend die anderen Bereiche auf "none")

    Gruess
    Meron

    Edit: habs grad noch kurz gecheckt:
    this.value wird nicht zum Ergebnis führen, es müsste eher so aussehen:
    function andere_inhalt () {
      for (i = 0; i < document.Testform.Auswahl.length; ++i)
        if (document.Testform.Auswahl.options[i].selected == true)
          alert(document.Testform.Auswahl.options[i].value);
    }


    Beitrag zuletzt geändert: 30.3.2013 14:25:01 von meron
  4. Autor dieses Themas

    leopold2104

    leopold2104 hat kostenlosen Webspace.

    Danke für die schnelle antwort :)

    Ich habe es nun Probier und bin bei diesem ergebnis:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript" language="JavaScript">
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block"
      } else {
        e.style.display="none"
      }
      return true;
    }
    </script>
    </head>
    <body vlink="#000000" alink="#FFFFFF" link="#000000" bgcolor="#FFFFFF" text="#000000">
    <div align="center">
    <select name="mods">
    <option>Bitte Mod Auswaehlen</option>
    <option class="dlink" onclick="return toggleMe('para10')" href="javascript:void(0)">DDrace</option>
    <option class="dlink" onclick="return toggleMe('para20')" href="javascript:void(0)">zCatch</option>
    <option class="dlink" onclick="return toggleMe('para30')" href="javascript:void(0)">Instagib</option>
    </select>
    <br>
    <br>
    </div>
    
    <div style="display:none;" class="dbox" id="para10">
    Test text..... 1 DDrace
    </div>
    
    <div style="display:none;" class="dbox" id="para20">
    Test text..... 2 zCatch
    </div>
    
    <div style="display:none;" class="dbox" id="para30">
    Test text..... 3 Insta
    </div>
    <br>
    </body>
    </html>


    es funktioniert, aber nun habe ich 2 probleme:
    1. er geht nur in Firefox
    2. wie mache das es den inhalt bei einer 2ten auswahl wieder löscht

    danke :)
  5. ich habs später nacheditiert, doch das sollte das Problem lösen (ungetestet):

    Dazu müsstest du den "option"-Elementen einfach noch den entsprechenden value zuweisen.
    Komplett sähe dass dann ungefähr so aus: (das mit dem theid ist nicht wirklich schön, habe ich jetzt einfach schnell so gelöst ...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript" language="JavaScript">
    function toggleMe () {
      for (i = 0; i < document.formularname.mods.length; ++i)
    {   var theid = document.formularname.mods.options[i].value;
    
     if (document.formularname.mods.options[i].selected == true)
    {
          document.getElementById(theid).style.display="block";}
    else
    { document.getElementById(theid).style.display="none";
    }
    }
    }
    </script>
    </head>
    <body vlink="#000000" alink="#FFFFFF" link="#000000" bgcolor="#FFFFFF" text="#000000">
    <div align="center"><form name="formularname">
    <select name="mods">
    <option value="k">Bitte Mod Auswaehlen</option>
    <option class="dlink" onclick="toggleMe()" value="para10">DDrace</option>
    <option class="dlink" onclick="toggleMe()" value="para20">zCatch</option>
    <option class="dlink" onclick="toggleMe()" value="para30">Instagib</option>
    </select>
    <br>
    <br>
    </div>
    <div style="display: none;" class="dbox" id="k">Bitte wählen Sie oben einen Mod ...</div>
    <div style="display:none;" class="dbox" id="para10">
    Test text..... 1 DDrace
    </div>
    
    <div style="display:none;" class="dbox" id="para20">
    Test text..... 2 zCatch
    </div>
    
    <div style="display:none;" class="dbox" id="para30">
    Test text..... 3 Insta
    </div>
    <br> </form>
    </body>
    </html>


    Denn so werden alle Options durchlaufen und der jeweilige Bereich ein oder ausgeschaltet.
  6. <select name="select1" id="select1" onChange="if(this.options[this.options.selectedIndex].value=='auswahl1') document.getElementById('test_ID_1').style.display = '',
    document.getElementById('test_ID_2').style.display = 'none';
    
    if(this.options[this.options.selectedIndex].value=='auswahl2') document.getElementById('test_ID_1').style.display = 'none', document.getElementById('test_ID_2').style.display = ''; ">
                      
    
                	<option value="auswahl1" style="text-align:left;">Auswahlmöglichkeit 1</option>
                    
                    <option value="auswahl2" style="text-align:left;">Auswahlmöglichkeit 2</option>
    
    
    
    
    <div id="test_ID_1" style="display:none;">text etc</div>
    
    <div id="test_ID_2" style="display:none;">text oder was auch immer (muss kein div sein)</div>
  7. Autor dieses Themas

    leopold2104

    leopold2104 hat kostenlosen Webspace.

    Danke für die Antworten aber es funktioniert nichts :(
  8. sorry, hab bei meinem code vergessen, das <select> zu schließen...
    hat so bei mir auch nicht funktioniert :wink:

    mit dem jetztigen code sollte es laufen!

    <select name="select1" id="select1" onChange="if(this.options[this.options.selectedIndex].value=='auswahl1') document.getElementById('test_ID_1').style.display = '',
    document.getElementById('test_ID_2').style.display = 'none';
    
    if(this.options[this.options.selectedIndex].value=='auswahl2') document.getElementById('test_ID_1').style.display = 'none', document.getElementById('test_ID_2').style.display = ''; ">
                      
    
                	<option value="" style="text-align:left;"></option>
    
                	<option value="auswahl1" style="text-align:left;">Auswahlmöglichkeit 1</option>
                    
                    <option value="auswahl2" style="text-align:left;">Auswahlmöglichkeit 2</option>
    
    </select>
    
    
    <div id="test_ID_1" style="display:none;">text etc</div>
    
    <div id="test_ID_2" style="display:none;">text oder was auch immer (muss kein div sein)</div>




    Beitrag zuletzt geändert: 30.3.2013 16:09:47 von cdot
  9. Autor dieses Themas

    leopold2104

    leopold2104 hat kostenlosen Webspace.

    sorry aber es geht nicht :(
  10. m******e

    Die Variante von meron etwas modifiziert, und schon funzt sie auch in anderen Browsern. ;)

    *klick*

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    <script type="text/javascript" language="JavaScript">
    var d=document;function toggleMe(){for(i=0;i<d.formularname.mods.length;++i)
    {var theid=d.formularname.mods.options[i].value;if(d.formularname.mods.options[i].selected==true)
    {d.getElementById(theid).style.display="block";}else{d.getElementById(theid).style.display="none";}}}
    </script>
    </head>
    <body vlink="#000000" alink="#FFFFFF" link="#000000" bgcolor="#FFFFFF" text="#000000">
    <div align="center"><form name="formularname">
    <select name="mods" onChange="toggleMe()">
    <option value="k">Bitte Mod Auswaehlen</option>
    <option class="dlink" value="para10">DDrace</option>
    <option class="dlink" value="para20">zCatch</option>
    <option class="dlink" value="para30">Instagib</option>
    </select></form></div><br /><br />
    <div style="display: none;" class="dbox" id="k">Bitte wählen Sie oben einen Mod ...</div>
    <div style="display:none;" class="dbox" id="para10">Test text..... 1 DDrace</div>
    <div style="display:none;" class="dbox" id="para20">Test text..... 2 zCatch</div>
    <div style="display:none;" class="dbox" id="para30">Test text..... 3 Insta</div>
    </body></html>


    Beitrag zuletzt geändert: 30.3.2013 19:12:16 von menschle
  11. Autor dieses Themas

    leopold2104

    leopold2104 hat kostenlosen Webspace.

    Danke :) jetz klappts ihr seid die besten :* *no homo*
    :D daaanke
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!