Søg
Avatar billede kdbo Nybegynder
19. maj 2008 - 13:58 Der er 12 kommentarer

Select hide/display afhængig af option

Hey,

Javascript er ikke lige min stærkeste side, så søger lidt råd her. Jeg har en select, hvor brugeren angiver om han skriver en artikel eller en anmeldelse. Hvis det er en anmeldelse skal der vises en ny select med antallet af stjerner, og hvis det er en artikel skal kilde og kilde link textbokse vises.

Eeftersom det hele er i en stor tabel, så derfor er det hele rækken der skal skjules.

Select:
<tr><td>Type: </td><td><select name="Type" onchange="return Go(this)"><option value="1" SELECTED>Artikel</option><option value="2" >Anmeldelse</option></select></td></tr>

Hvis det er en artikel:
<tr><td>Kilde: </td><td><input type="text" name="Kilde" value="" style="width:300px"></td></td></tr>
<tr><td>Kilde link: </td><td><input type="text" name="Kilde_link" value="" style="width:300px"></td></td></tr>

Hvis det er en anmeldelse:
<tr><td>Stjerner: </td><td><select name="Stjerner"><option value="0">Vælg</option><option value="1" SELECTED>1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option></select></td></tr>
Avatar billede w13 Novice
19. maj 2008 - 14:18 #1
<script type="text/javascript">
function ToggleDisplay(o){
  o.style.display=o.style.display!="block"?"none":"block"
}
</script>

Så kan du bruge denne select:

<select name="Type" onchange="ToggleDisplay(document.getElementBy(this.options[this.selectedIndex].value)"><option value="artikel" SELECTED>Artikel</option><option value="anmeldelse">Anmeldelse</option></select>

Så skal du bare lægge id="artikel" på det element, der indeholder artikel-delen, og id="anmeldelse" på elementet, der indeholder anmeldelses-delen.
Jeg mener dog ikke, du må lægge disse direkte på tr-tags, da disse ikke bare sådan kan skjules/vises.
Avatar billede kdbo Nybegynder
19. maj 2008 - 14:20 #2
kan jeg smide en div uden om?
Avatar billede w13 Novice
19. maj 2008 - 14:21 #3
Ikke direkte om en tr. Så ville jeg sørge for, at artikler ligger i én tabel og anmeldelser i en anden. Så kan du godt lægge id'erne direkte på tabellerne.
Avatar billede w13 Novice
19. maj 2008 - 14:25 #4
Hov, og funktionen skulle ikke være:
<script type="text/javascript">
function ToggleDisplay(o){
  o.style.display=o.style.display!="block"?"none":"block"
}
</script>
men:
<script type="text/javascript">
function ToggleDisplay(o){
  o.style.display=o.style.display!="block"?"block":"none"
}
</script>
Avatar billede kdbo Nybegynder
19. maj 2008 - 16:13 #5
jeg prøvede at smide følgende i et script for at teste det, og begge p tags bliver vist selv om jeg skifter i select tagget:

<p id="Artikel">Artikel</p><p id="Anmeldelse">Anmeldelse</p>
Avatar billede kdbo Nybegynder
19. maj 2008 - 16:20 #6
Du får lige hele sourcen:

<html>
<head>
      <title>Title here!</title>
          <script type="text/javascript">
        function ToggleDisplay(o){
          o.style.display=o.style.display!="block"?"block":"none"
        }
        </script>
</head>
<body>
<select name="Type" onchange="ToggleDisplay(document.getElementBy(this.options[this.selectedIndex].value)"><option value="artikel" SELECTED>Artikel</option><option value="anmeldelse">Anmeldelse</option></select>
<p id="artikel">Artikel</p><p id="anmeldelse">Anmeldelse</p>
</body>
</html>
Avatar billede w13 Novice
19. maj 2008 - 16:47 #7
Ja, javascript er case-sensitive, hvilket vil sige, at du ikke kan bruge store og små bogstaver, som du lyster. ;) Så dit første eksempel duer ikke, når du har id="Artikel" og id="Anmeldelse". De skal begge 2 begynde med lille A, men det har du jo ændret i dit sidste eksempel.

Prøv lige at sætte style="display:none" på begge p-tags.
Avatar billede w13 Novice
19. maj 2008 - 16:53 #8
Når du laver hjemmesider er det en rigtig god idé at slå visning af JavaScript-fejl til. :) På den måde fandt jeg hurtigt fejlene, som var sneget sig ind i min kode.

Dette her er testet og virker:

<html>
<head>
      <title>Title here!</title>
        <script type="text/javascript">
    function Hide(a){
        for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.dislay="none"
    }
        function ToggleDisplay(o){
            o.style.display=o.style.display!="block"?"block":"none"
        }
        </script>
</head>
<body>

<select onchange="Hide(['artikel','anmeldelse']);ToggleDisplay(document.getElementById(this.options[this.selectedIndex].value))">
<option value="artikel" selected="selected">Artikel</option>
<option value="anmeldelse">Anmeldelse</option>
</select>

<p id="artikel" style="display:none">Artikel</p><p id="anmeldelse" style="display:none">Anmeldelse</p>

</body>
</html>

Bemærk at jeg har tilføjet:

Hide(['artikel','anmeldelse'])

Den kommando sørger for, at når man vælger noget, bliver de begge 2 først skjult. På den måde kan de ikke komme til at blive vist samtidig.
Avatar billede kdbo Nybegynder
19. maj 2008 - 16:53 #9
Så er de begge gemt væk, og kommer ikke frem.
Avatar billede w13 Novice
19. maj 2008 - 16:57 #10
Den sidste kode jeg postede er testet. :)
Avatar billede kdbo Nybegynder
19. maj 2008 - 17:42 #11
Jeg har lige testen den og her er hvad jeg fik:

skifter til anmeldelse: der står anmeldelse.
Skifter til artikel: der står både anmeldelse og artikel
skifter til artikel og der står anmeldelse
skifter til artikel og der står intet

Det virker til at det er lidt tilfældigt hvordan den skifter, og dette er copy n' paste af den kode du postet:)
Avatar billede w13 Novice
22. maj 2008 - 12:40 #12
Nej, der sneg sig alligevel en fejl ind.

Jeg har optimeret lidt og testet igen:
**************************************
<html>
<head>
<title>Title here!</title>
<script type="text/javascript">
function ShowItem(o){
    var o=document.getElementById(o.options[o.selectedIndex].value);
    var a=['artikel','anmeldelse'];
    for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
    o.style.display=o.style.display!="block"?"block":"none"
}
</script>
</head>
<body>

<select onchange="ShowItem(this)">
<option value="artikel" selected="selected">Artikel</option>
<option value="anmeldelse">Anmeldelse</option>
</select>

<p id="artikel" style="display:none">Artikel</p>
<p id="anmeldelse" style="display:none">Anmeldelse</p>

</body>
</html>
*********************************
Så nu foregår det på en lidt anden og mere hensigtsmæssig måde.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 3 27/04/202620:09 28/04/202621:05
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:37 Hente CSV fil, indsætte CSV data i TABEL for JAVASCRIPT Af snestrup2000 i Programmeringsværktøjer
I går 12:23 Facebook Af hkv i Sociale medier
I går 11:38 JAVASCRIPT omdan ekstern variabel til søjleværdi .. Af snestrup2000 i Programmeringsværktøjer
I går 09:50 jeg mangler hjælp til opsætning af shop og Google ADS Af Hightech i Webhotel
I går 09:42 udstyr til udespa Af Hightech i Andet programmering
White papers
Flere white papers »