click images to change select option

by Chris LaFrombois

HTML

<div class="woocommerce-product-details__short-description">
	<span style="font-family: 'Montserrat', sans-serif; font-size: 16px; color: #574f4b; font-weight:700;">Finish</span>

<div style="width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
	
	<img onclick="SelectADropdownItem('design-dropdown','0109-cream')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0109-Cream.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0109 Cream">	
	
	<img onclick="SelectADropdownItem('design-dropdown','0209-honey')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0209-Honey.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0209 Honey">
	
	<img onclick="SelectADropdownItem('design-dropdown','0309-walnut')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0309-Walnut.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0309 Walnut">
	
	<img onclick="SelectADropdownItem('design-dropdown','0409-spice')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0409-Spice.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0409 Spice">
	
	<img onclick="SelectADropdownItem('design-dropdown','0509-english-chestnut')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0509-English-Chestnut.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0509 English Chestnut">
	
	<img onclick="SelectADropdownItem('design-dropdown','0609-nutwood')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0609-Nutwood.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0609 Nutwood">
	
	<img onclick="SelectADropdownItem('design-dropdown','0709-cherrywood')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0709-Cherrywood.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0709 Cherrywood">
	
	<img onclick="SelectADropdownItem('design-dropdown','0809-mahogany')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0809-Mahogany.jpg" style="width:8%; margin:5px;...

JavaScript

function SelectADropdownItem(id,val)
{
console.log('test');
   var d = document.getElementById(id);
   for( var i=0; i<d.length; i++ )
   {
      if( d[i].value == val ) { d[i].selected = true; }
      else { d[i].selected = false; }
   }
}