Hiv tekst og billede ud af <select>

Det er lidt uklart, hvad du mener. Skal man i en selectboks kunne vælge mellem et antal titler, som hvis de bliver valgt opdaterer to felter et andet sted på siden med henholdsvis billede og indholdsfortegnelse?

Ja, altså bogens billede og indholdsfortegnelse (tekst) skal så blive vist.

Jeg har fundet dette eksempel her på exp:

<select name="navn" onchange="document.getElementById('tekst').innerHTML = this.value;">
<option value="Anders">Anders</option>
<option value="And">And</option>
</select>

<div id="tekst"></div>

O.k., det er ganske nemt.

<script type="text/javascript">
bog = new Array();
bog[0] = new Array("billede1.gif", "Her er indholdsfortegnelsen.<br />Kapitel 1..."); //Billedet og indholdsfortegnelsen til den første bog
bog[1] = new Array("billede2.gif", "Indhold 2"); //Den anden bog
bog[2] = new Array("billede3.gif", "Indhold 3");
bog[3] = new Array("billede4.gif", "Indhold 4"); //osv.

function vaelgBog(sel) {
  nr = sel.selectedIndex;
  document.images["bogbill"].src = bog[nr][0];
  document.getElementById("bogtxt").innerHTML = bog[nr][1];
}
</script>

<form>
<select onchange="vaelgBog(this);">
<option value="bog1">Bog nr. 1</option>
<option value="bog2">Bog nr. 2</option>
<option value="bog3">Bog nr. 3</option>
<option value="bog4">Bog nr. 4</option>
</select>
</form>

Det er også muligt at preloade billederne til bøgerne, men hvis der er rigtig mange, vil det bare gøre siden meget tung at loade i starten.

Hov, jeg glemte helt koden til billedet og teksten:

<img src="billede1.gif" name="bogbill" />

<span id="bogtxt">Her er indholdsfortegnelsen.<br />Kapitel 1...</span>

Det ser jo meget fint ud! Lige et par spm:

- Kan man bare bruge alm HTML tags i teksten (kan se du bruger <br />)?
- Umiddelbart kan man ikke vælge bog1 uden først at vælge bog2 (fordi den er auto-valgt). Kan man gøre sådan at den første bliver "Vælg bog" eller noget i den stil?

Det kan man godt, men jeg troede bare, du ville have en default-værdi.

Din select skal se således ud:

<select onchange="vaelgBog(this);">
<option value="">Vælg bog...</option>
<option value="bog1">Bog nr. 1</option>
<option value="bog2">Bog nr. 2</option>
<option value="bog3">Bog nr. 3</option>
<option value="bog4">Bog nr. 4</option>
</select>

... og denne linje:

nr = sel.selectedIndex;

... skal rettes til:

nr = sel.selectedIndex - 1;

Ah, min fejl - beklager! Jeg havde misset at billede1.gif både skulle være i arrayet samt <img src="billede1.gif" name="bogbill" />.

Så det virker perfekt! Læg et svar. :o)

Hvorfor var det du brugte <br /> og ikke bare <br>?

Fordi det skal man, hvis man vil kode korrekt XHTML - og jeg holder mig gerne til nye (fornuftige) standarder.

Læs mere her:
http://www.w3schools.com/xhtml/default.asp

Det vil jeg se på. Du glemte et svar. ;o)

Svar. :)

Tak for hjælpen!