How to change image from dropdown list created from MySQL table


#1

Hello,

I’ve created a dropdown list from a MySQL table. When selected I want each entry in the dropdown list, to change an image shown on the page. I can display the last image in the dropdown list, but cant get it to change tehre after.

Do I need to do this with jscript?? I would rather do it all with PHP
Code:

echo “All Tartans:

”;

$sql = “SELECT ID, TartanID, Clan, Variation, Manufacturer, Supplement, SupplementVAT, ImagePath FROM Tartan”;
$result = $conn->query($sql);

if ($result->num_rows > 0)
{
// output data of each row into dropdown list
?>
<select name=“Tartan” )
<?php

	while($row = $result->fetch_assoc()) 
	{
  	echo 	"ID: " . $row["ID"]. "<br>" . 
	 			"TartanID: " . $row["TartanID"]. "<br>" . 
		 		"Clan: " . $row["Clan"]. "<br>" . 
			 	"Variation: " . $row["Variation"]. "<br>" . 
				 "Manufacturer: " . $row["Manufacturer"]. "<br>" . 
		 		"Supplement: " . $row["Supplement"]. "<br>" . 
		 		"SupplementVAT: " . $row["SupplementVAT"]. "<br>" . 
		 		"ImagePath: " . $row["ImagePath"]. "<br>"; 
				
				$clan = $row["Clan"];
				$img_path = $row["ImagePath"];
				
				echo "<option value='$Clan' >$clan</option>";
				
                
}

?>

<div class="img-block">
    <img src="<?php echo $img_path; ?>" 
    	 alt="<?php echo $clan; ?>" 
             title="<?php echo $clan; ?>" 
             width="200" 
             height="200" class="img-responsive" />

</div>
<?php	

}
else
{
echo “0 results”;
}
echo “
”;

$conn->close();
?>