Hi guys,
I am quite new to javascript and I admit that I feel more confortable with php and c++ rather than JS. So, I am stuck in front of this bug since a little while and I would like to have your help, please.

Here's my problem: I work to fix up many things on an existing shopping cart website and I need to change the top image according to the selected color in a dropdown list. The issue is that list is generated in php by the reply from the sql database, not a simple index number from the dropdown list. So, I need to work with an array and explode it in several parts and here's where I lost my way. The color is the second item in the array. Could you have a look to the code I included, please. Thanks in advance for your help.

Code:
<script language="JavaScript" type="text/javascript">
function CngColor(obj){

var Path='http://www.xyz.com/images_products/xyz_colors/';
var str=obj.options[index].value;
var wantedColor=(str.split("||"));

index=obj.selectedIndex;
var wantedColor = obj.options[1].value
if (index<1){ return; }
document.getElementById('largeimage').src=Path+wantedColor;
}
</script>
<?
  $id = $_GET['id'];
  if(!preg_match('/^[a-zA-Z0-9]+$/', $id))
  {
    header('Location: ?page=message&id=2');
  }
  $sql = "SELECT DISTINCT products.num,name,color " .  
       "FROM products,product_detail " . 
       "WHERE products.num = product_detail.num AND product_detail.num ='". $id . "'"; 
  
        
  $result = mysql_query($sql, $link);
  $contents = mysql_fetch_assoc($result);
  $numRows = mysql_num_rows($result);

  if($numRows < 1)
  {
    header('Location: ?page=message&id=5');
  }
    $id = $contents['num']
?>
<h3><?= $contents['name'] ?></h3>
<table>
<tr><td><? print"<img id=\"largeimage\"  src=\"images_products/large/" . $id . "_" .$contents['color'].".jpg\" onError=this.src='images/default_large.jpg' /></td><td><p>". $contents['desc']."</p></td>";?>
<td><table>
  <? 
     $sql = "SELECT DISTINCT color " .  
            "FROM product_detail " . 
           "WHERE num ='". $id . "'"; 
      $result = mysql_query($sql, $link);
        while($colors = mysql_fetch_assoc($result))
        {
		   if($id != 'r001')
          {
             print "<tr><td><img src=\"images_products/xyz_colors/" .$colors['color'].".jpg\" id=\"xyzcolor\"                onClick=\"changeImage('".$id."','".$colors['color']."')\"/></td><td>".$colors['color']."</td></tr>" ;
		  }
		   
        }
  
  ?> 
  </table></td>
</tr>
</table>

  <select name="dropdownlist" onchange="CngColor(this);">
   <?   
	  $sql = "SELECT * FROM product_detail " . 
         "WHERE num = '" . $id . "' ORDER BY size";
  	  $result = mysql_query($sql, $link);
   ?>
   
   <?
   	  while($contents = mysql_fetch_assoc($result))
      {?>
   			
  			<option name="<?= $id ?>_details" type="radio" value="<?= $contents['size'] . "||" . $contents['color'] . "||" . $contents['price']?>" id="<?= $id ?>_details" >

	

		
		<?=$contents['size'] . " - " . $contents['color'] . " - $" . number_format($contents['price'], 2, '.', ',')?></option><br />
	 <? }?></select><br/>
	 Please enter the amount you wish to purchase: <input type="text" id="<?= $id ?>_quantity" size="1" maxlength="3" value="1"/>
	 <input type="button" onClick="sendInfo('<?= $id ?>');" value="Add to cart"/>
<img src="images/wait_spacer.gif" alt="wait_spacer.gif" id="<?= $id ?>_img"/>
<div id="<?= $id ?>"></div>
<a href="?page=viewCart&id=">View Cart</a>