CODEWITHSUNDEEP
javascripthtml
Josh
Josh

Reputation: 15

Displaying image based on multiple selection value(s)

I have a multiple selection box that I would like to use the value's from to display images based on selecting these values, eg. if one value is selected then one image would be displayed, if two are selected two would be displayed etc. I would also like a limit on it of three images displayed at once, no matter how many selections. 

<select multiple name="item" class="details" action="post" id="mySelect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>

Any help would be greatly appreciated, thank you!

What I've tried so far:

<script type="text/javascript"> 
<!--  
function showimage() {  
var htmlStr=""; 
var option = document.getElementById("selectedValue"); 
for (i=0;i<option.options.length;i++) { 
if (option.options[i].selected) { 
htmlStr+='<img src="/products/"; 
htmlStr+=option.options[i].value; 
htmlStr+='" /><br />'; 
} 
} 
document.getElementById('mySelect').innerHTML = htmlStr; 
}  
//--> 
</script>

The images are located in /products/..

Upvotes: 0

Views: 1235

Answers (2)

Thomas Bormans
Thomas Bormans

Reputation: 5362

Change your html to this:

<select multiple name="item" class="details" action="post" id="mySelect" onchange="showimage(this.value)">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

And your JavaScript to this:

function showimage(option) {
    var htmlStr="";
    if(option > 3) {
        option = 3;
    }
    for(i=0;i<option;i++) {
        htmlStr+='<img src="/products/' + i + '.jpg" /><br />';
    }
    document.getElementById('images').innerHTML = htmlStr;
}

All your images should be in the products folder with names: 1.jpg, 2.jpg, ...

Upvotes: 0

Billy
Billy

Reputation: 2448

Don't forget to put correct image paths.

function imageFunc(imageid){
	
 var Imageplace=document.getElementById("myImage");
  Imageplace.src=imageid;
  }
<select multiple name="item" class="details"  id="mySelect" onchange="imageFunc(this.value)";>
<option value="1.jpg">One</option>
<option value="2.jpg">Two</option>
<option value="3.jpg">Three</option>
<option value="4.jpg">Four</option>
</select>
<img id="myImage" src="1.jpg"/>

Upvotes: 1

Related Questions