Avatar billede nemlig Professor
04. marts 2014 - 19:53 Der er 8 kommentarer og
1 løsning

Vis/skjul områder alt efter valg i dropdownliste

Hejsa.
Jeg har en drowdownliste, som fx denne her med 3 valg muligheder:

<select name="type">
  <option value="99" id="1">Vælg brugertype:</option>
  <option value="1" id="2">Standard bruger</option>
  <option value="2" id="3">Administrator</option>
</select>

Jeg har 3 områder med input-felter, som jeg ønsker vist, alt efter hvad der er valgt på dropdownlisten ovenfor.
Hvis id=1, så vises område 1.
Hvis id=2, så vises område 1 og område 2
Hvis id=3, så vises område 1 og område 3
Nogen forslag til løsning.
Avatar billede jakobdo Ekspert
04. marts 2014 - 20:02 #1
Avatar billede nemlig Professor
04. marts 2014 - 20:17 #2
Hej Jakob og tak for dit forslag.

Og er det så meningen, at jeg skal hente jQuery 2.1.0.?

Jeg har en ældre version kørende, men med den virker dit forslag ikke.
Avatar billede jakobdo Ekspert
04. marts 2014 - 20:21 #3
Jeg kan ikke se hvorfor den ikke virker med tidligere udgaver.
Du har vel en 1.3 eller noget?
Burde stadig virke.
Så mit bud er du gør noget galt et andet sted. :o)
Avatar billede nemlig Professor
04. marts 2014 - 20:45 #4
Jeg har version 1.3.2.

Jeg har prøvet med denne simple kode, som heller ikke virker:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head><title>Kalender</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/style.php" type="text/css" />
<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
    $("#myselect").change(function(){
        switch($(this).val()){
            case "99":
                $("#omr1").show();
                $("#omr2").hide();
                $("#omr3").hide();
                break;
            case "1":
                $("#omr2").show();
                $("#omr3").hide();
                break;
            case "2":
                $("#omr2").hide();
                $("#omr3").show();
                break;
        }
    });
});
</script>
</head>
<body>
<select name="type" id="myselect">
  <option value="99" id="1">Vælg brugertype:</option>
  <option value="1" id="2">Standard bruger</option>
  <option value="2" id="3">Administrator</option>
</select>

<div id="omr1">Område 1</div>
<div id="omr2" style="display:none">Område 2</div>
<div id="omr3" style="display:none">Område 3</div>

</body>
</html>
Avatar billede jakobdo Ekspert
04. marts 2014 - 20:54 #5
denne kode virker fint hos mig:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head><title>Kalender</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#myselect").change(function(){
        switch($(this).val()){
            case "99":
                $("#omr1").show();
                $("#omr2").hide();
                $("#omr3").hide();
                break;
            case "1":
                $("#omr2").show();
                $("#omr3").hide();
                break;
            case "2":
                $("#omr2").hide();
                $("#omr3").show();
                break;
        }
    });
});
</script>
</head>
<body>
<select name="type" id="myselect">
  <option value="99" id="1">Vælg brugertype:</option>
  <option value="1" id="2">Standard bruger</option>
  <option value="2" id="3">Administrator</option>
</select>

<div id="omr1">Område 1</div>
<div id="omr2" style="display:none">Område 2</div>
<div id="omr3" style="display:none">Område 3</div>

</body>
</html>
Avatar billede nemlig Professor
04. marts 2014 - 21:04 #6
Hmmm, din kode virker også hos mig.
Så må det være min 1.3.2-kode det er galt med.

Er det ikke bedst at hente koden, fremfor at linke til den?
Vil du anbefale, at jeg henter en nyere kode?

Og hvis ja, kan den have negativ indvirkning på min dato-picker mm. (som du har lavet koden til, hvis du husker)
Avatar billede nemlig Professor
04. marts 2014 - 21:38 #7
Jeg har det til at virke med min lokale 1.3.2.
Så det kører.

Men jeg har en ting, der driller.

Hvis jeg fx på dropdown har valgt "Administrator", så vises områderne helt korrekte. Her er nogle input-felter, som skal udfyldes, og som jeg validerer på ved "Submit". Ved "Submit" genindlæses siden, og hvis jeg i valideringen fanger en fejl, vises fejlen og felterne har værdierne, som de var indtastet ved og dropdownlisten står forudvalgt med "Administrator".

Så langt så godt, men.....

Det er kun område1, der vises.
Avatar billede nemlig Professor
11. marts 2014 - 08:58 #8
Hej Jakob.
Har du en nem løsning, så vis/skjul også virker ved "onload".
Avatar billede nemlig Professor
20. marts 2014 - 23:06 #9
Tak for hjælpen indtil videre.
Jeg søger løsning på "onload" på anden vis. :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester