Question

我使用此代码根据下拉选项显示和隐藏图片：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>

<select id="my_select" name="select_name" class="order_form_select">
    <option data-img="" value="" disabled selected>Please select&nbsp;↓</option>
    <option data-img="1.jpeg" value="first">First</option>
    <option data-img="2.jpeg" value="second">Second</option>
    <option data-img="3.jpeg" value="third">Third</option>
</select>

<img id="order_form_image" src="">

<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
    $("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
    $('#img_src').html($("#order_form_image").attr('src'));
    return false;
}
</script>

</body>
</html>

它非常好用。但是在Firefox 48.0.1上，如果没有下拉选择，我会得到一个破碎的图像图标。这是一个截图：

为什么？我该怎么做才能阻止它？

Answer 1

这是因为您在加载时没有设置源属性。它仅在触发更改事件后才会设置。

隐藏元素，直到设置src，然后取消隐藏。

Answer 2

一个简单而快速的解决方案是将此代码添加到CSS：

img[src='']{
    display:none;
}

说明：只要下拉列表中没有选择图像，图像名称就为空。只要图像名称为空，CSS代码就会隐藏整个图像标记。

jQuery：在下拉列表中显示图像选择在Firefox上显示损坏的图像图标

2 个答案: