✔ [JScript]Bild-URL ändern bei Klick auf Liste

[g-zus]

Hi Leude,

so, ich hab da ein kleines Problem.
Und zwar siehts so aus:

Ich habe ein Select-Feld/Menüliste und ein Bild.
Nun will ich, dass wenn ich aus der Liste einen anderen Eintrag als den aktuellen Wähle sich das Bild ändert, also ein anderes angezeigt wird.
Das Bild is gleich daneben/darunter platziert.

Als JavaScript habe ich da folgendes mal gefunden:

<script language=javascript>

function search_select(engine){
switch(engine){
case 'bild1': document.suchbild.src='http://www.domain.com/bild1.jpg';break;
case 'bild2': document.suchbild.src='http://www.domain.com/bild2.jpg';break;
case 'bild3': document.suchbild.src='http://www.domain.com/bild3.jpg';break;
case 'bild4': document.suchbild.src='http://www.domain.com/bild4.jpg';break;
}
}

</script>

Das Bild, also der IMG-Code wurde mit dem Eintrag name=suchbild ergänzt.

Dieses Script lässt sich jetzt recht einfach z.B. mit Radiobuttons verwenden.
Wenn man hier jetzt dann onFocus="search_select('bild1')" verwendet, dann ändert sich durch klick auf den Radiobutton das Bild.

Dies wollte ich jetzt aber für solch ein Listenmenü verwenden.
Doch da funktionierts bisher leider nicht......

Zuerst habe ich es mit onClick, onFocus, onSelect usw. bei den einzelnen OPTION-Zeilen des SELECT-Feldes probiert, also so:

<select ....>
 <option value="#" onSelect="search_select('bild1')">blabla</option>
</select>

Da ich ned wusste welchen Befehl man hier verwendet (onSelect, onClick, etc.) hab ich einfach alle durchprobiert funzte alles nicht.

Dann habe ich es so probiert:

<select onChange="search_select(this.form)">>
 <option value="bild1" >blabla</option>
</select>

das funzte leider genauso wenig.

Kann mir da wer von euch weiterhelfen?
Hab leider eher wenig Ahnung von JS...

 

[THE REAL TOOLKIT]

Warum so umständlich per Switch(das wurde doch eh erst in JS v1.2 eingeführt?!)

<script type="text/javascript">
function search_select(engine){
document.suchbild.src='http://www.domain.com/'+engine+'.jpg'
}
</script>

onchange oder onselect,sollte beides gehen

 

[g-zus]

wo muss ich welches platzieren?

also ich hab bisher immer das onChange im <select>-Teil reingebaut.
das onSelect gehört dann wahrscheinlich in jede einzelne <option>-Row, oder?

Naja, danke.
ich probiers mal.....

 

[g-zus]

so, habs jetzt hingekriegt, war aber noch bissel arbeit!

so siehts jetzt aus:

<script language=javascript>

function search_select(form){

var myindex = form.pre_select.selectedIndex

document.suchbild.src='http://www.domain.com/'+form.pre_select.options[myindex].value+'';

}

</script>

pre_select ist der Name des Liste.
Und so sieht dann die Liste aus:

      <select name="pre_select" onChange="search_select(this.form)">
	<option value="">Bild auswählen</option>
	<option value="bild1.gif">Bild1</option>
	<option value="bild2.gif">Bild2</option>
      </select>

So funzt es endlich so wie ich wollte.
Aber danke tool, dank dir sieht mein JS-Script um längen leichter aus und ich muss nicht umständlich mit dem Switch-Befehl arbeiten und hab damit weniger zum nachkorrigieren!

 

[Adam Wille]

Keine Ahnung, wie du das hingezaubert bekommen haben sollst, denn das Objekt "form" innerhalb des select-Objektes bei dir existiert ja gar nicht; jedenfalls denke ich folgender Code ist schlüssiger

<script type="text/javascript" language="JavaScript">
<!--
function search_select(sel) {
	document.suchbild.src = "http://www.domain.com/" + sel.options[sel.selectedIndex].value + "";
}
//-->
</ script>

(</ script zusammen)

als JavaScript-Part und diesen Formular-Part:

<form name="theform">
<select name="pre_select" onchange="search_select(this)">
    <option value="">Bild auswählen</option>
    <option value="bild1.gif">Bild1</option>
    <option value="bild2.gif">Bild2</option>
</select>
</form>

Sieht für mich logischer aus.

Geist

 

[g-zus]

will ja nicht an deinen programmierkenntnissen zweifeln, aber bei mir klappts auch so, ohne irgendwelche fehlermeldungen.

=======> es muss richtig sein

_____________________________________

q.e.d.








=)

 

[Adam Wille]

Sag' ja - hätte für mich keine Logik was das DOM beträfe, wenn du verstehst was ich meine!?

Aber ich kenn' auch nicht den ganzen Aufbau des Dokumentes, wo kann man sich das denn mal anschauen, vielleicht erklärt sich's dann für mich logisch?

Geist

 

[g-zus]

anschauen?

ich schick dir URL usw. damit du es dir anschauen kannst per PM. =)