Select2模板示例下拉框切换时图片重复追加问题求助

嘿，这个问题很常见——你现在用的append()方法每次触发下拉框change事件时，都会把新图片追加到#app-bg容器里，而不是替换掉原来的内容，所以第二次切换就会出现多张图片叠加的情况。

给你几个简单的解决办法，选适合你场景的就行：

方法1：先清空容器再添加新图片 #

在添加新图片前，先用empty()清空容器内的所有内容，这样每次都是全新的图片：

$(document).ready(function () {
    $('select#event_palette').change(function () {
        var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
        $("#app-bg").empty().append("<img src='"+ selectVal + "'></img>");
    });
});

empty()会移除#app-bg里的所有子元素，之后再用append()添加新图片，完美避免重复。

方法2：直接替换容器内的HTML内容 #

更简洁的方式是用html()方法，直接把容器内的内容替换成新图片的HTML代码，一步到位：

$(document).ready(function () {
    $('select#event_palette').change(function () {
        var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
        $("#app-bg").html("<img src='"+ selectVal + "'></img>");
    });
});

html()会完全覆盖目标元素内的现有内容，不需要额外的清空步骤，代码更清爽。

方法3：修改已有图片的src属性（推荐如果有默认图的情况） #

如果你的#app-bg容器一开始就有一张默认预览图（比如<div id="app-bg"><img src="默认图路径"></div>），那直接修改这张img的src属性就好，不用反复创建新元素，性能更好：

$(document).ready(function () {
    $('select#event_palette').change(function () {
        var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
        $("#app-bg img").attr('src', selectVal);
    });
});

这种方式只修改DOM元素的属性，不会频繁销毁和创建节点，体验更流畅。

小补充 #

如果担心图片加载失败的情况，可以给img加个alt属性和错误处理，比如：

$("#app-bg").html("<img src='"+ selectVal + "' alt='调色板预览' onerror='this.src=\"res/img/Palette/default-md.jpg\"'></img>");

这样当选中的图片不存在时，会自动显示默认图，提升用户体验。

内容的提问来源于stack exchange，提问作者user9595480