下拉菜单(选择）--根据所选内容选择项目和图片

Dropdown menu (select) -- selecting an item and picture shows based on the selection

本文关键字：选择 项目 --根 下拉菜单      更新时间：2023-09-26

我希望页面上有3个以上的选择器，每个选择器在选择项目时显示不同的产品图像。如果有3个选择器，将有3个不同的div来显示图像。

我的代码有问题：

<!-- Selector for Mug -->
<script type="text/javascript">     
$(function(){
    function changeImage(image)
{
    // hide all mainimages          
    $('div.mainimage-mug > div ').hide();
    // show the selected image
    $('div.mainimage-mug > div.' + image).show();        
}

$('select.mug').change(function(){       
    // get the selected option
    var selected = $('select.mug option:selected');
    changeImage(selected.val());   
   });

});

谢谢！

我更喜欢一种完全不同的方法。由于我们处理的是图像，并在更改select时对其进行更改，所以我更喜欢更改图像的src，而不是使用show-hide方法。它更简单。

<select onchange="change_image(this.value)">
     <option value="red">red</option>
     <option value="green">green</option>
     <option value="blue">blue</option>
</select>
function change_image(color){
var dynamic_src="";
switch(color){
 case "red":
 dynamic_src="red_image.jpeg";
 break;
case "blue":
 dynamic_src="blue_image.jpeg";
 break;
 case "green":
 dynamic_src="Green_image.jpeg";
 break;
}
$('#image_to_be_replaced').attr('src',dynamic_src);
}
相关文章：