03. maj 2007 - 17:19
Der er
7 kommentarer
Select option show / hide layer
Hejsa, Jeg har virkelig brugt lang tid på Google på at finde en funktion der kan show / hide layer ud fra hvad brugeren vælger i en selectbox. Er der nogle der kan hjælpe?
Annonceindlæg tema
Forsvar & beredskab
Cybersikkerhed, realtidsdata og robuste it-systemer er blevet fundamentet for moderne forsvar.
<select ... onchange="document.getElementById('dinDiv').style.display=this.selectedIndex>2?'block':'none';">
Hmm. Det virker ikke.. Jeg forsøger at skjule en div, som kun skal vise hvis en option er valgt. Vælger man en anden option skal div skjules igen. Har forsøgt med følgende men det virker ikke: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hide/Show Test</title> <style> #mindiv {visibility:hidden;} </style> </head> <body bgcolor="#ffffff"> <form method="post" name="form" action="ProcessData.aspx"> <select onchange="document.getElementById('mindiv').style.display=this.selectedIndex=3?'block':'visible';"> <option value="null">Vælg event (gem div)</option> <option value="1">Item1 (gem div)</option> <option value="2">Item2 (gem div)</option> <option value="3">Item3 (vis div)</option> <option value="4">Item4 (gem div)</option> </select> </form> <br><br><br><br> <div id="mindiv">Her er indholdet</div> </body> </html> Hvad er der galt?
I javascript bruges 2 lighedstegn til at udforske lighed, et bruges kun til værdi-tildeling ... Så det skal bare ændres til: <select onchange="document.getElementById('mindiv').style.display=this.selectedIndex==3?'block':'visible';">
Hrm, du havde så taget udgangspunkt i visibility, hvilket i nogen sammenhænne kan være fornuftigt, men oftest ikke er det: <html> <head> <title>Hide/Show Test</title> <style> #mindiv {display:none;} </style> </head> <body bgcolor="#ffffff"> <form method="post" name="form" action="ProcessData.aspx"> <select onchange="document.getElementById('mindiv').style.display=this.selectedIndex==3?'block':'none';"> <option value="null">Vælg event (gem div)</option> <option value="1">Item1 (gem div)</option> <option value="2">Item2 (gem div)</option> <option value="3">Item3 (vis div)</option> <option value="4">Item4 (gem div)</option> </select> </form> <br><br><br><br> <div id="mindiv">Her er indholdet</div> </body> </html>
-- og så hedder det: <style type="text/css">
Fantastisk - det virker! Tak for hjælpen.
Vi tilbyder markedets bedste kurser inden for webudvikling