Hi, hello everyone this is my first post. I have exhausted manuals and tutorials and posts and I can't get this to work.
Hope somebody here can help me.

I have a mySql query then from the data an array is created. With values from the array a dropdown list for a form is created. Then a javascript array is created from the php array. and an onchange() function is trying to change an image in a field, using the ID value from the dropdown list selection (dropd.value) as key in the Array (to display the image name).

Code PHP:
<?PHP
include 'open_connection_con.php';
$prod_query = mysqli_query($con,"SELECT id, type, image_name, description FROM Products");
 
$products = array();
while($row = mysqli_fetch_array($prod_query))
	{
		$products[] = $row;
	}
 
// then I create a dropdown list within a form.
echo "<select name='prodType' id='prodDrop' onchange='swapProd()'>";
echo "<option value='0'>Select one:</option>";
foreach ($products as $row)
	{
		echo "<option value='" . $row['id'] . "'>" . $row['type'] . "</option>";
	}
echo "</select>";
 
mysqli_close($con);
?>

Code JavaScript:
<script type="text/javascript">
 
// pass the php array into a javascript array.
var prodArrJS = <?php echo json_encode($products);?>
 
// and the function to display the image (on <img id="prodImage">) of the selected product from the dropdown list above
function swapProd()
{
var image = document.getElementById("prodImage");
var dropd = document.getElementById("prodDrop");
image.src = "images/ex/" + prodArrJS[dropd.value][2] + ".jpg";
var p1=document.getElementById("lar");
p1.value="x"
}
</script>

Code PHP:
<?php
unset( $products );
?>

The image at the end of the function is not displayed (nothing is displayed, not even the little question mark) and the function stops.
I have tested the array with numbers and strings and it works ok.
Thanks in advance.
R.Mars