Avatar billede 3z Nybegynder
09. august 2006 - 15:08 Der er 8 kommentarer og
1 løsning

fra drop down til tekst

Hej,

Jeg har en drop down med forskellige valgmuligheder. Jeg ønsker nu at lave det sådan, at afhængig af hvilken valgmulighed man vælger skrives en forskellig tekst ved siden af.

What to do ?

Teksten der skrives ved siden af er ikke lig med value i drop down, så jeg skal kunne definere nærmere hvilken tekst der skrives for hver option i drop down.

Håber I forstår...
Avatar billede mclemens Nybegynder
09. august 2006 - 15:22 #1
Eksempel 1:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
swchtext=[
"Vælg en søgemaskine i dropdown menuen",
"Altavista er ikke blevet brugt så flittigt som for 10 - 12 år siden.",
"Google er blevet set af enkelte personer som en slags frelser? ... grundet mange links, gratis og ikke kommerciel... Men er dog ved at blive kommerciel efterhånden.",
"Jubii er ved at skyde sig selv i foden ved at gå amok med generalle prisstigninger for et link - hvilket i nogle tilfælde kan give virksomheder cost - per - click priser på langt over 10 kr.",
"MSN er alternativet til Google men bliver sommetider overset med vilje af folk der mener at Microsoft ikke kan finde ud af noget - hvilket jo selvfølgelig er forkert... Det er dog ikke alt Microsoft er bedst til...",
"Yahoo er også røget lidt i glemme bogen og havde trukket stikket ud for dk søgning - men er dog vendt tilbage igen"
];

function swchtxt(o){
  document.getElementById("swchtxt").childNodes[0].nodeValue=swchtext[o.selectedIndex];
}

</script>

</head><body>
<select name="dropdownvalg" onchange="swchtxt(this);" style="width:177px;">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>

<div id="swchtxt" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>
</body></html>
Avatar billede mclemens Nybegynder
09. august 2006 - 15:28 #2
nr 2..


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function swchtxt(o){
  for(i=0;tn=document.getElementById("swchtxt"+i);i++)tn.style.display="none";
  document.getElementById("swchtxt"+o.selectedIndex).style.display="block";
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

</head><body>
<select name="dropdownvalg" onchange="swchtxt(this);" style="width:177px;">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>

<div id="swchtxt0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>
<div id="swchtxt1" class="hide" style="width:175px;border:1px solid #000;">Altavista er ikke blevet brugt så flittigt som for 10 - 12 år siden.</div>
<div id="swchtxt2" class="hide" style="width:175px;border:1px solid #000;">Google er blevet set af enkelte personer som en slags frelser? ... grundet mange links, gratis og ikke kommerciel... Men er dog ved at blive kommerciel efterhånden.</div>
<div id="swchtxt3" class="hide" style="width:175px;border:1px solid #000;">Jubii er ved at skyde sig selv i foden ved at gå amok med generalle prisstigninger for et link - hvilket i nogle tilfælde kan give virksomheder cost - per - click priser på langt over 10 kr.</div>
<div id="swchtxt4" class="hide" style="width:175px;border:1px solid #000;">MSN er alternativet til Google men bliver sommetider overset med vilje af folk der mener at Microsoft ikke kan finde ud af noget - hvilket jo selvfølgelig er forkert... Det er dog ikke alt Microsoft er bedst til...</div>
<div id="swchtxt5" class="hide" style="width:175px;border:1px solid #000;">Yahoo er også røget lidt i glemme bogen og havde trukket stikket ud for dk søgning - men er dog vendt tilbage igen</div>

</body></html>





... anbefaler nr. 2... Hjalp det?
Avatar billede 3z Nybegynder
10. august 2006 - 01:56 #3
Det ser super ud, men hvis jeg nu havde brug for at ændre 2 forskellige tekster 2 forskellige steder ved valg af option - hvordan udvides dine eksempler så bedst ?
Avatar billede mclemens Nybegynder
10. august 2006 - 08:34 #4
Det afhænger lidt af hvad du præcis skal bruge - om det skal være en ændring ved valg af samme option eller om det skal være ved valg af forskellige options... Her er lige et eksempel på det første, den kan selvfølgelig rettes, tilpasses og forbedres...


eksempel 2a


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function swchtxt(o){
  for(i=0;tn=document.getElementById("swchtxt"+i);i++)tn.style.display="none";
  for(i=0;tn=document.getElementById("swchtxtb"+i);i++)tn.style.display="none";
  document.getElementById("swchtxt"+o.selectedIndex).style.display="block";
  document.getElementById("swchtxtb"+o.selectedIndex).style.display="block";
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

</head><body>
<select name="dropdownvalg" onchange="swchtxt(this);" style="width:177px;">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>

<div id="swchtxt0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="swchtxt1" class="hide" style="width:175px;border:1px solid #000;">Altavista er ikke blevet brugt så flittigt som for 10 - 12 år siden.</div>

<div id="swchtxt2" class="hide" style="width:175px;border:1px solid #000;">Google er blevet set af enkelte personer som en slags frelser? ... grundet mange links, gratis og ikke kommerciel... Men er dog ved at blive kommerciel efterhånden.</div>

<div id="swchtxt3" class="hide" style="width:175px;border:1px solid #000;">Jubii er ved at skyde sig selv i foden ved at gå amok med generalle prisstigninger for et link - hvilket i nogle tilfælde kan give virksomheder cost - per - click priser på langt over 10 kr.</div>

<div id="swchtxt4" class="hide" style="width:175px;border:1px solid #000;">MSN er alternativet til Google men bliver sommetider overset med vilje af folk der mener at Microsoft ikke kan finde ud af noget - hvilket jo selvfølgelig er forkert... Det er dog ikke alt Microsoft er bedst til...</div>

<div id="swchtxt5" class="hide" style="width:175px;border:1px solid #000;">Yahoo er også røget lidt i glemme bogen og havde trukket stikket ud for dk søgning - men er dog vendt tilbage igen</div>


<br><br><br>



<div id="swchtxtb0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="swchtxtb1" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.altavista.com">Besøg Altavista</a></div>

<div id="swchtxtb2" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.google.com">Besøg Google</a></div>

<div id="swchtxtb3" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.jubii.dk">Besøg Jubii</a></div>

<div id="swchtxtb4" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.msn.dk">Besøg MSN</a></div>

<div id="swchtxtb5" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.yahoo.com">Besøg Yahoo</a></div>

</body></html>
Avatar billede mclemens Nybegynder
10. august 2006 - 08:38 #5
eksempel 2b - udvidet med check efter samme id som dropdown menuen har så den er lidt mere flexibel - lagt over som ændring ved skifte i 2 forskellige dropdowns...





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function swchtxt(o){
  for(i=0;tn=document.getElementById(o.id+i);i++)tn.style.display="none";
  document.getElementById(o.id+o.selectedIndex).style.display="block";
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

</head><body>
<select name="dropdownvalg" onchange="swchtxt(this);" style="width:177px;" id="tskifta">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>



<div id="tskifta0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="tskifta1" class="hide" style="width:175px;border:1px solid #000;">Altavista er ikke blevet brugt så flittigt som for 10 - 12 år siden.</div>

<div id="tskifta2" class="hide" style="width:175px;border:1px solid #000;">Google er blevet set af enkelte personer som en slags frelser? ... grundet mange links, gratis og ikke kommerciel... Men er dog ved at blive kommerciel efterhånden.</div>

<div id="tskifta3" class="hide" style="width:175px;border:1px solid #000;">Jubii er ved at skyde sig selv i foden ved at gå amok med generalle prisstigninger for et link - hvilket i nogle tilfælde kan give virksomheder cost - per - click priser på langt over 10 kr.</div>

<div id="tskifta4" class="hide" style="width:175px;border:1px solid #000;">MSN er alternativet til Google men bliver sommetider overset med vilje af folk der mener at Microsoft ikke kan finde ud af noget - hvilket jo selvfølgelig er forkert... Det er dog ikke alt Microsoft er bedst til...</div>

<div id="tskifta5" class="hide" style="width:175px;border:1px solid #000;">Yahoo er også røget lidt i glemme bogen og havde trukket stikket ud for dk søgning - men er dog vendt tilbage igen</div>


<br><br><br>

<select name="dropdownvalg" onchange="swchtxt(this);" style="width:177px;" id="tskiftb">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>

<div id="tskiftb0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="tskiftb1" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.altavista.com">Besøg Altavista</a></div>

<div id="tskiftb2" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.google.com">Besøg Google</a></div>

<div id="tskiftb3" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.jubii.dk">Besøg Jubii</a></div>

<div id="tskiftb4" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.msn.dk">Besøg MSN</a></div>

<div id="tskiftb5" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.yahoo.com">Besøg Yahoo</a></div>

</body></html>
Avatar billede mclemens Nybegynder
10. august 2006 - 08:45 #6
Eksempel 2c med skifte af de id'er der angives efter
onchange="swchtxt(this,'iderneher,adskiltmedkomma,forhvertid');"








<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function swchtxt(o,tn){
  tn=tn.split(",");
  for(i in tn)for(j=0;tno=document.getElementById(tn[i]+j);j++)tno.style.display=(j==o.selectedIndex)?"block":"none";
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

</head><body>
<select name="dropdownvalg" onchange="swchtxt(this,'tskifta,tskiftb');" style="width:177px;">
<option>Vælg en søgemaskine</option>
<option>Altavista</option>
<option>Google</option>
<option>Jubii</option>
<option>MSN</option>
<option>Yahoo</option>
</select>



<div id="tskifta0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="tskifta1" class="hide" style="width:175px;border:1px solid #000;">Altavista er ikke blevet brugt så flittigt som for 10 - 12 år siden.</div>

<div id="tskifta2" class="hide" style="width:175px;border:1px solid #000;">Google er blevet set af enkelte personer som en slags frelser? ... grundet mange links, gratis og ikke kommerciel... Men er dog ved at blive kommerciel efterhånden.</div>

<div id="tskifta3" class="hide" style="width:175px;border:1px solid #000;">Jubii er ved at skyde sig selv i foden ved at gå amok med generalle prisstigninger for et link - hvilket i nogle tilfælde kan give virksomheder cost - per - click priser på langt over 10 kr.</div>

<div id="tskifta4" class="hide" style="width:175px;border:1px solid #000;">MSN er alternativet til Google men bliver sommetider overset med vilje af folk der mener at Microsoft ikke kan finde ud af noget - hvilket jo selvfølgelig er forkert... Det er dog ikke alt Microsoft er bedst til...</div>

<div id="tskifta5" class="hide" style="width:175px;border:1px solid #000;">Yahoo er også røget lidt i glemme bogen og havde trukket stikket ud for dk søgning - men er dog vendt tilbage igen</div>


<br><br><br>


<div id="tskiftb0" style="width:175px;border:1px solid #000;">Vælg en søgemaskine i dropdown menuen</div>

<div id="tskiftb1" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.altavista.com">Besøg Altavista</a></div>

<div id="tskiftb2" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.google.com">Besøg Google</a></div>

<div id="tskiftb3" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.jubii.dk">Besøg Jubii</a></div>

<div id="tskiftb4" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.msn.dk">Besøg MSN</a></div>

<div id="tskiftb5" class="hide" style="width:175px;border:1px solid #000;"><a href="http://www.yahoo.com">Besøg Yahoo</a></div>

</body></html>
Avatar billede 3z Nybegynder
14. november 2006 - 22:58 #7
Glimrende smid et svar
Avatar billede mclemens Nybegynder
14. november 2006 - 23:26 #8
Kommer her :)
Avatar billede mclemens Nybegynder
19. april 2007 - 18:17 #9
Tak for point :o)
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