时间戳

首页 > 解决方案 > Javascript 在下拉菜单上更改图像 - 缺少图像

javascript - Javascript 在下拉菜单上更改图像 - 缺少图像

问题描述

我有一小段 JavaScript 可以根据下拉菜单更改图像。它目前可以正常工作并按应有的方式更改图像。不幸的是，如果图像不存在，它会显示丢失的图像图标，我宁愿保留默认图像。

我的 JavaScript 是 -

<script>
$(function() {
    $("#input_1").change(function(){
        var selectedImage = $(this).find(':selected').val();
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src=images/11_" + selectedImage + ".jpg>");
        $('a.lb:first img').addClass( "img-fluid" );

    });
});
</script>

我的 HTML 是 -

<img src="images/11_1.jpg" alt="Objective Marker Bases" title="Objective Marker Bases" class="img-fluid">
<select name="id[1]" required="required" aria-required="true" id="input_1" class="form-control">
<option value="" selected="selected">--- Please Select ---</option>
<option value="1">White</option>
<option value="2">Yellow (+£1.00)</option>
<option value="4">Blue</option>
</select>

标签： javascripthtmljqueryimagedrop-down-menu

解决方案

您可以在图像上放置一个事件侦听器。

$('a.lb:first img').on('error', function(){
   $(this).attr('src', 'images/11_1.jpg'); // default image
});

推荐阅读