Avatar billede clausga Nybegynder
12. juni 2009 - 13:29 Der er 21 kommentarer

Option dropdown menu skift side

Jeg har en:

<select name="color">
<option>Blå</option>
<option>Sort</option>
<option>Sølv</option>
</select>


Kan man ikke lave sådan når man vælger sølv, så skifter siden automatisk til at vise sølv billede ?
Avatar billede mcb2001 Nybegynder
12. juni 2009 - 14:09 #1
jo, med javascript...

du kunne f.eks. tilføje:

<select name="color" onchange="java script: doSomethingMethod();">
<option>Blå</option>
<option>Sort</option>
<option>Sølv</option>
</select>
Avatar billede clausga Nybegynder
12. juni 2009 - 14:48 #2
Ja men hvad :-)

Hvordan laver jeg denne doSomethingMethod();"> ? kan man lave så er den POST til den side man her på så jeg kan hente det frem for denne side ?
Avatar billede majbom Novice
14. juni 2009 - 20:06 #3
nu ved jeg ikke hvordan du normalt får din side til at vise sølv billede, men en javascript-funktion kunne se sådan ud:

function changeColor(objSelect){
  window.location.href='www.dinside.dk?color='.objSelect.value;
}

og så din select:

<select name="color" onchange="java script: changeColor(this)">
<option value="blaa">Blå</option>
<option value="sort">Sort</option>
<option value="soelv">Sølv</option>
</select>

når du så skifter option i selecten, kalder den siden igen og tager værdien af den valgte option med i variablen "color"
Avatar billede clausga Nybegynder
15. juni 2009 - 10:35 #4
splazz det lyder som en fin løsning, men kan man ikke lave det som POST, så den ikke ændre URL adressen ?
Avatar billede majbom Novice
15. juni 2009 - 11:21 #5
jo det kan man gøre med en form:

<form action="dinside.php" method="post">
<select name="color" onchange="this.form.submit()">
<option value="blaa">Blå</option>
<option value="sort">Sort</option>
<option value="soelv">Sølv</option>
</select>
</form>

så kan du droppe javascriptet - og så forøvrigt også lige at der var en fejl i mit forrige eksempel, så det skal du holde øjnene fra :)
Avatar billede clausga Nybegynder
15. juni 2009 - 13:06 #6
Jo men problemer er at

Der er en form nu, hvor man kan vælge farven og så trykke på LÆG I KURV, og så går den til indkøbssiden.

Men det er ikke det den skal når man bare vælger farven og ikke trykker på LÆG I KURV. Så skal den bare skifte billedet og blive på den samme side som den er.

Kan det lade sig at gører ?
Avatar billede majbom Novice
15. juni 2009 - 20:31 #7
nååh...

vi prøver én gang til så ;)

så er det faktisk som i #3 - du skal bare ændre:

window.location.href='www.dinside.dk?color='.objSelect.value;

til:

document.getElementById('id_på_dit_billede').src='sti_til_dit_nye_billede/'+objSelect.value+'gif_jpg_bmp_whatever';
Avatar billede clausga Nybegynder
15. juni 2009 - 21:17 #8
Hvordan henter jeg så billedet frem ?
Avatar billede majbom Novice
16. juni 2009 - 07:54 #9
hvordan har du det nu?

kan du vise noget kode, eller bedre; siden?
Avatar billede clausga Nybegynder
16. juni 2009 - 21:30 #10
Jeg har desværre ikke lagt siden op endnu, men hvad kode vil du gerne se, hvordan jeg henter billedet ?

for det er bare <img src=images/blabla_<? echo $color;?>.JPG>
Avatar billede mcb2001 Nybegynder
17. juni 2009 - 12:19 #11
følgende burde virke:



<img id="colorImage" src="images/blabla_<? echo $color;?>.JPG"> 

<select id="colorSelect" name="color" onchange="java script: changeColor();">
<option value="blue">Blå</option>
<option value="black">Sort</option>
<option value="silver">Sølv</option>
</select>

<script type="text/javascript">

function changeColor()
{
  var colorElem = document.getElementById('colorSelect').value;
  document.getElementById('colorSelect').src= 'images/blabla_' + colorElem + '.JPG';
}

</script>
Avatar billede majbom Novice
17. juni 2009 - 19:31 #12
-> #10 - ja, så smider du bare et id på billedet dér og bruger så min kode fra #3 og #7:

function changeColor(objSelect){
  document.getElementById('colorImg').src='images/blabla_'+objSelect.value+'.JPG';
}


dit billede:

<img id="colorImg" src=images/blabla_<? echo $color;?>.JPG>


og så din select:

<select name="color" onchange="changeColor(this)">
<option value="blaa">Blå</option>
<option value="sort">Sort</option>
<option value="soelv">Sølv</option>
</select>
Avatar billede clausga Nybegynder
17. juni 2009 - 20:08 #13
#11 kan jeg ikke få til at virke

#12 det ser ud til at virke fint :-) kan jeg få farven ud som tekst på samme side i en variabel

$farve = FARVE fra javascript ?
Avatar billede majbom Novice
17. juni 2009 - 20:41 #14
ja det kan man sagtens, nu ved jeg ikke i hvilket element du vil have farven til at stå i - en div, span, input-felt eller noget helt fjerde?
Avatar billede clausga Nybegynder
17. juni 2009 - 22:58 #15
jeg vil have den til at stå som tekst, så jeg kan bruge den som variabel i PHP
Avatar billede majbom Novice
18. juni 2009 - 06:18 #16
er ikke sikker på at jeg forstår dig - vil du have den med i din formular?

php-koden er jo afviklet når brugeren får mulighed for at skifte farve og så er der ikke så meget ide i en php-variabel før siden evt. kaldes igen...
Avatar billede clausga Nybegynder
19. juni 2009 - 21:58 #17
Siden kaldes vel igen når der vælges en ny farve ? og så kan man vel skrive farven ud som tekst ?
Avatar billede majbom Novice
19. juni 2009 - 22:24 #18
du ville jo netop have at siden IKKE skulle kaldes igen? sådan læserjeg i hvert fald #6...
Avatar billede mcb2001 Nybegynder
19. juni 2009 - 22:45 #19
jeg opgav da han gik igang igen med at det skulle være en PHP variabel... Hvis han ikke engang selv ved hvad opgaven går ud på, hvem gør så?
Avatar billede clausga Nybegynder
21. juni 2009 - 00:20 #20
Jeg er ikke så meget inde i javascript, men når man vælger en farve så ændre IMG sig jo så den vælger et andet billede ud fra farven. Er det så ikke muligt at få farve valget udskrivet som tekst også, så der under billedet står fx. blå ?
Avatar billede majbom Novice
21. juni 2009 - 13:09 #21
det kan man sagtens (som skrevet før)..

men har du en tom div eller span eller andet under billedet du vil bruge?

f.eks.

<div id="color_name">&nbsp;</div>

...

<script type="text/javascript">
function changeColor(objSelect){
  var elmDiv = document.getElementById('color_name');
  elmDiv.appendChild(document.gcreateTextNode(objSelect.value));
  document.getElementById('colorImg').src='images/blabla_'+objSelect.value+'.JPG';
}
</script>
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