Sichtbar bzw unsichtbar
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
auswahl
bereich
bestimmter inhalt
blocken
code
dank
display
dokument
eigenschaft
erstellen
funktion
homo
http
problem
setzen
test
text
url
vorschlagsliste
-
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 :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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 :) -
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. -
<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> -
Danke für die Antworten aber es funktioniert nichts :(
-
sorry, hab bei meinem code vergessen, das <select> zu schließen...
hat so bei mir auch nicht funktioniert
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 -
sorry aber es geht nicht :(
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
