javascript - 基于多个选择值显示图像

Question

我有一个多重选择框，我想使用该值来根据选择这些值来显示图像，例如。如果选择一个值，则将显示一张图像，如果选择两个值，将显示两张图像，等等。我还希望限制一次显示三张图像，无论有多少个选择。

<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>

任何帮助将不胜感激，谢谢!

到目前为止我已经尝试过:

<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>

图像位于/products/..

Answer 1

不要忘记放置正确的图像路径。

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"/>