jQuery：在下拉选择中显示图像会使 Firefox 上的图像图标损坏答案

【问题标题】：jQuery: Show image on dropdown select makes broken image icon on FirefoxjQuery：在下拉选择中显示图像会使 Firefox 上的图像图标损坏
【发布时间】：2016-10-20 06:09:30
【问题描述】：

我正在使用此代码根据下拉选择显示和隐藏图像：

<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 上，如果没有下拉选择，我会得到一个损坏的图像图标。截图如下：

为什么？我能做些什么来预防它？

【问题讨论】：

标签： javascript jquery html firefox

【解决方案1】：

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

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

【讨论】：

怎么做？（我对 Javascript 不是很有经验。）
我找到了解决办法。

【解决方案2】：

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

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

说明：只要下拉菜单中没有选择图片，图片的名称就为空。只要图片名称为空，CSS 代码就会隐藏整个图片标签。

【讨论】：