图像更改取决于下拉值更改？

Question

我正在使用select2库的模板示例。当我第一次更改下拉值时，它会工作并预览正确的图像，但第二次，它会附加第二个图像，而不会放置第一个图像。

JS：

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

Answer 1

您正在将新图像附加到同一节点，将其替换为使其正常工作。

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

Answer 2

使用html（）而不是append（）。

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