Notifikationer

Markér alle som læst Log ud

axel21 Juniormester

16. maj 2008 - 14:23 Der er 14 kommentarer og
2 løsninger

Hjælp til dropdown ved hjælp af onclick

Har denne kodestump:

<form id="menu" action=""><p>
<select size="1">
<option selected="selected">Vælg antal personer</option>
<option value="1" onclick="document.getElementById('1').style.display=this.checked?'inline':'none';">1. person</option>
<option value="2" onclick="document.getElementById('2').style.display=this.checked?'inline':'none';">2. personer</option>
<option value="3" onclick="document.getElementById('3').style.display=this.checked?'inline':'none';">3. personer</option>
<option value="4" onclick="document.getElementById('4').style.display=this.checked?'inline':'none';">4. personer</option>
<option value="5" onclick="document.getElementById('5').style.display=this.checked?'inline':'none';">5. personer</option>
</select>
</p>
</form>

Jeg kan ikke få den til at hente dette frem når man vælger en af mulighederne:

<td class="blue">Titel:</td><td><input type="text" id="1" class="userinput" size="21" name="titel"></td>
<td class="blue">Titel:</td><td><input type="text" id="2" class="userinput" size="21" name="titel1"></td>
<td class="blue">Titel:</td><td><input type="text" id="3" class="userinput" size="21" name="titel2"></td>
<td class="blue">Titel:</td><td><input type="text" id="4" class="userinput" size="21" name="titel3"></td>
<td class="blue">Titel:</td><td><input type="text" id="5" class="userinput" size="21" name="titel4"></td>

Synes godt om

w13 Novice

16. maj 2008 - 14:55 #1

Det er, fordi man ikke kan bruge en onclick på en option. Du skal sætte det som onchange på selve <select>'en:

<form id="menu" action=""><p>
<select size="1" onchange="if(this.options[this.selectedIndex].value!='')document.getElementById(this.options[this.selectedIndex].value).style.display='inline'">
<option selected="selected">Vælg antal personer</option>
<option value="1">1. person</option>
<option value="2">2. personer</option>
<option value="3">3. personer</option>
<option value="4">4. personer</option>
<option value="5">5. personer</option>
</select>
</p>
</form>

Og husk, at id'er ikke må starte med tal. ;)

Synes godt om

axel21 Juniormester

16. maj 2008 - 22:47 #2

Du har så evigt ret. Problemet er så bare nu, at den jo kun viser en af gange. Dvs. når jeg trykker på 3 personer, åbner den kun titel for person 3, men ikke for person 1 og? 2

Synes godt om

w13 Novice

17. maj 2008 - 10:57 #3

Så gør du bare sådan her (husk at rette i "var a=" så det indeholder alle de ID's, som skal skjules):

<script type="text/javascript">
function Show(o){
var a=["1","2","3","4","5"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var oSelected=o.options[o.selectedIndex].value;
if(oSelected!='')document.getElementById(oSelected).style.display="inline"
}
</script>

<form id="menu" action=""><p>
<select size="1" onchange="Show(o)">
<option selected="selected">Vælg antal personer</option>
<option value="1">1. person</option>
<option value="2">2. personer</option>
<option value="3">3. personer</option>
<option value="4">4. personer</option>
<option value="5">5. personer</option>
</select>
</p>
</form>

Synes godt om

roenving Novice

17. maj 2008 - 13:29 #4

>>w13

-- hvadfor kan det være, at du noterer at id'er er ugyldige og så selv skriver kode, der arbejder med denne ugyldige ting ?-)

Synes godt om

w13 Novice

17. maj 2008 - 13:34 #5

Tjaeh, det synes jeg, at axel21 selv skal have lov til at rode med. Så kan han selv vælge passende id-navne til sine elementer. :)

Synes godt om

axel21 Juniormester

18. maj 2008 - 11:18 #6

Dette virker ikke. Hvad gør jeg galt?

<script type="text/javascript">
function Show(o){
var a=["person1titel","person1fornavn","person1efternavn"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var oSelected=o.options[o.selectedIndex].value;
if(oSelected!='')document.getElementById(oSelected).style.display="inline"
}
</script>

<form id="menu" action=""><p>
<select size="1" onchange="Show(o)">
<option selected="selected">Vælg antal personer</option>
<option value="1">1. person</option>
<option value="2">2. personer</option>
<option value="3">3. personer</option>
<option value="4">4. personer</option>
<option value="5">5. personer</option>
</select>
</p>
</form>

<td class="blue">Titel:</td><td><input type="text" id="person1titel" class="userinput" size="21" name="titel" style="display:none"></td>

<td class="blue">Fornavn(e):</td><td><input type="text" id="person1fornavn" class="userinput" size="21" name="fornavn"></td>

<td class="blue">Efternavn:</td><td><input type="text" id="person1efternavn" class="userinput" size="21" name="efternavn"></td>

Synes godt om

w13 Novice

18. maj 2008 - 11:45 #7

Nu prøver du på noget helt andet.

Koden gør det, at den viser det element, som har samme id som den valgte value.

Så hvis man vælger:
<option value="2">2. personer</option>

så vil den prøve at vise elementet med id="2" - og nu har du jo omdøbt dine elementer. Så må du også omdøbe dine values.

Synes godt om

axel21 Juniormester

19. maj 2008 - 11:50 #8

Jeg har prøvet og prøvet, men det virker sgu ikke. Ret mig gerne der hvor jeg ikke fatter en meter....

<html>
<head>
<LINK href="../default.css" type="text/css" rel="stylesheet">

<script type="text/javascript">
function popup(url,name,win_height,win_width) {
pos_horizon = ((screen.width/2)-(win_width/2));
pos_vertical = ((screen.height/2)-(win_height/2));
window.open(url,name,"width="+win_width+",height="+win_height+",top="+pos_vertical+",left="+pos_horizon+",scrollbars=yes");
}
</script>

<script type="text/javascript">
function Show(o){
var a=["person1titel","person1fornavn"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var oSelected=o.options[o.selectedIndex].value;
if(oSelected!='')document.getElementById(oSelected).style.display="inline"
}
</script>

</head>

<form action="forside.php" method="POST">

<table border="0">

<tr><td>
<form id="menu" action=""><p>
<select size="1" onchange="Show(o)">
<option selected="selected">Vælg antal personer</option>
<option value="person1titel">1. person</option>
<option value="person1fornavn">2. personer</option>
<option value="3">3. personer</option>
<option value="4">4. personer</option>
<option value="5">5. personer</option>
</select>
</p>
</form>
</td></tr>

<tr>
<td class="blue">Titel:</td><td><input type="text" id="person1titel" class="userinput" size="21" name="titel" style="display:none"></td>
<td class="blue">Titel:</td><td><input type="text" id="person2titel" class="userinput" size="21" name="titel1" style="display:none"></td>
<td class="blue">Titel:</td><td><input type="text" id="person3titel" class="userinput" size="21" name="titel2" style="display:none"></td>
<td class="blue">Titel:</td><td><input type="text" id="person4titel" class="userinput" size="21" name="titel3" style="display:none"></td>
<td class="blue">Titel:</td><td><input type="text" id="person5titel" class="userinput" size="21" name="titel4" style="display:none"></td>
</tr>

<tr>
<td class="blue">Fornavn(e):</td><td><input type="text" id="person1fornavn" class="userinput" size="21" name="fornavn" style="display:none"></td>
<td class="blue">Fornavn(e):</td><td><input type="text" id="person2fornavn" class="userinput" size="21" name="fornavn1"></td>
<td class="blue">Fornavn(e):</td><td><input type="text" id="person3fornavn" class="userinput" size="21" name="fornavn2"></td>
<td class="blue">Fornavn(e):</td><td><input type="text" id="person4fornavn" class="userinput" size="21" name="fornavn3"></td>
<td class="blue">Fornavn(e):</td><td><input type="text" id="person5fornavn" class="userinput" size="21" name="fornavn4"></td>
</tr>

Synes godt om

w13 Novice

19. maj 2008 - 11:52 #9

<select size="1" onchange="Show(o)">
skal være:
<select size="1" onchange="Show(this)">

Det er derfor, du får fejlmeddelelsen "'o' is undefined", når du slår JavaScript-fejlmeddelelser til. ;)

Synes godt om

axel21 Juniormester

19. maj 2008 - 11:55 #10

Se det hjalp jo gevaldigt. mange tak.

Synes godt om

axel21 Juniormester

19. maj 2008 - 11:58 #11

Hvordan putter man flere values på samme option?

<form id="menu" action=""><p>
<select size="1" onchange="Show(this)">
<option selected="selected">Vælg antal personer</option>
<option value="person1titel","person1fornavn">1. person</option>
<option value="person1fornavn">2. personer</option>
<option value="3">3. personer</option>
<option value="4">4. personer</option>
<option value="5">5. personer</option>
</select>
</p>
</form>

Synes godt om

w13 Novice

19. maj 2008 - 12:02 #12

Så skal koden skrives lidt om.
Men vi kan jo så sige, at du bare skal adskille med komma:
<option value="person1titel,person1fornavn">1. person</option>

Og så skal funktionen:
<script type="text/javascript">
function Show(o){
var a=["person1titel","person1fornavn"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var oSelected=o.options[o.selectedIndex].value;
if(oSelected!='')document.getElementById(oSelected).style.display="inline"
}
</script>
rettes til:
<script type="text/javascript">
function Show(o){
var a=["person1titel","person1fornavn"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var aSelected=o.options[o.selectedIndex].value.split(",");
if(aSelected){
for(var i=0;i<aSelected.length;i++){
document.getElementById(aSelected[i]).style.display="inline"
}
}
}
</script>

Synes godt om

w13 Novice

19. maj 2008 - 12:02 #13

Det er dog utestet, så det kan godt indeholde skrivefejl. :)

Synes godt om

w13 Novice

19. maj 2008 - 12:03 #14

Og det kan vist forkortes til:

<script type="text/javascript">
function Show(o){
var a=["person1titel","person1fornavn"]; //ID'er på elementerne som skal skjules
for(var i=0;i<a.length;i++)document.getElementById(a[i]).style.display="none";
var aSelected=o.options[o.selectedIndex].value.split(",");
for(var i=0;i<aSelected.length;i++)document.getElementById(aSelected[i]).style.display="inline"
}
</script>

Synes godt om

axel21 Juniormester

19. maj 2008 - 12:07 #15

Du er rimelig vild til det shit. Mange mange tak, nu kan jeg endelig komme videre.

Synes godt om

w13 Novice

19. maj 2008 - 12:09 #16

:P Selv tak!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS