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

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

＆＃13;

function imageFunc(imageid){
	
 var Imageplace=document.getElementById("myImage");
  Imageplace.src=imageid;
  }

＆＃13;

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

＆＃13;

Answer 2

将您的HTML更改为：

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

你的JavaScript：

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

您的所有图片都应位于产品文件夹中，名称为：1.jpg，2.jpg，...

根据多个选择值显示图像

2 个答案: