Javascript Option wählen Problem

Ich habe diesen Javascript-Code aus dem Internet. Es ist ein Skript, das ein Bild und eine Überschrift aus der Auswahl eines Dropdown-Feldes Optionen ändert. Das Skript funktioniert gut. Das einzige Problem, das ich habe, ist, dass der Wert im Optionsfeld nur Zahlen sein kann. Gibt es trotzdem eine Anpassung, während der Wert innerhalb des Optionsparameters Wörter anstelle von Zahlen sein kann? Hier ist der Code:Javascript Option wählen Problem

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
img{ 
height:200px; 
width:250px; 
display:block; 
margin-top:10px; 
} 
#caption{ 
font-family:Verdana,tahoma,arial; 
font-size:10pt; 
text-align:center; 
display:block; 
width:250px; 
} 
</style> 
<script type="text/javascript"> 
/************************************************************ 
* Script by : Raymond Angana 
* Title: Dropdown Based Picture w/ Captions 
* First seen in AFHB2000.com 
* rangana in AHFB2000.com 
* Created June 5, 2008 
* This notice must stay intact 
/**********************************************************/ 
window.onload=function() 
{ 
    var caption=['Default Image Caption', 
       'Caption1', 
       'Caption2', 
       'Caption3', 
       'Caption4', 
       'Caption5', 
       'Caption6', 
       'Caption7', 
       'Caption8', 
       'Caption9'], // This will be your images caption 
    bp='http://h1.ripway.com/rangana/images/', //base url of your images 
    imgnum=14, //Number of your images. This should match on your comboboxes options. 
    thumb=document.getElementById('thumb'), //id of your image that will be changing 
    description=document.getElementById('caption'), //id of your caption 
    combobox=document.getElementById('selection'); // id of your combobox. 

    combobox.onchange=function() 
    { 
    thumb.src=bp+'Picture'+this.value+'.jpg'; 
    description.innerHTML=caption[this.value]; 
    } 
} 
</script> 
</head> 
<body> 
<label>Please Change the default picture: </label> 
<select id="selection"> 
<option>Change Picture</option> 
<option value="1">Image 1</option> 
<option value="2">Image 2</option> 
<option value="3">Image 3</option> 
<option value="4">Image 4</option> 
<option value="5">Image 5</option> 
<option value="6">Image 6</option> 
<option value="7">Image 7</option> 
<option value="8">Image 8</option> 
<option value="9">Image 9</option> 
</select> 
<br> 
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb"> 
<span id="caption">Caption for the default Image</span> 
</body> 
</html>

Jede Hilfe wäre sehr dankbar

Quelle

2009-05-17 arcadian

Das Wertattribut kann Text sein, es muss keine Zahl sein. Das einzige, was in dem obigen Code brechen ist:

description.innerHTML=caption[this.value];

Sie ersetzen können, dass sein:

description.innerHTML = caption[this.selectedIndex]

Quelle

2009-05-17 02:49:29

Sie Paul sind ein Genie. Danke Kumpel. Es funktionierte. – arcadian

Ich weiß nicht, den Grund, warum Sie das Wort in dem Optionswert haben wollen würden, wenn Sie Wort dort haben, dann wäre es schwierig sein, die Beschriftung zu bekommen.

Wenn das Ziel ist, das Bild für bestimmte Option spezifisch zu bekommen und wenn Sie Ihren eigenen Bildnamen anstelle von 'Bild' + ID setzen möchten, würde ich wie folgt ändern.

In onLoad ändern Titel Array wie unten (mehr Optionen und die entsprechenden Bilder hinzufügen):

var appimages=[['Caption1','image1.gif'],['Caption2','image2.gif']];

Und in onChange Funktionswechsel wie folgt:

thumb.src=bp+appimages[this.value][1]; 
description.innerHTML=appimages[this.value][0];

Hoffnung, das hilft.

Quelle

2009-05-17 02:46:39 Kumar225

Antwort

Verwandte Themen