Jquery在表单中的select/option字段的div中显示多个图像

我需要一些帮助来找到jQuery解决方案，以便从表单中的图像选择列表中在预览DIV中显示多个图像

例如：

<select name="collection[]" id="collection" multiple="multiple">
   <option value=""> - Select Image - </option>
   <option value="image1.jpg">image1.jpg</option>
   <option value="image2.jpg">image2.jpg</option>
   <option value="image3.jpg">image3.jpg</option>
</select>

<div id="imagePreview">
Display image here, preferrably in a table/group. When the user deselects from the list the image disappears from this div.
</div>

我在下面的回答中见过这个jquery脚本，但它不适用于倍数

<script type="text/javascript">
$(document).ready(function() {
    $("#collection").change(function() {
        var src = $(this).val();

        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});
</script>

非常感谢您的帮助！谢谢。

发件人：

.val方法主要用于 获取表单元素的值。在里面 在元素的情况下 .val方法返回一个数组 包含每个选定选项

因此，您只需循环遍历src数组中的每个元素：

---

请注意，我使用了$，这是一种创建具有动态属性的元素比将字符串连接在一起更简单的方法。

如果对任何人都有帮助，我将基于该解决方案进行构建，最终得到：

$("#collection").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += "<img src='" + $(this).val() + "' border='0' style='padding: 3px;' alt=\"" + $(this).text() + "\" /> ";
              });
          $("#imagePreview").html(str);
        })
        .change();
});

---

这使我能够更好地控制表单中的文本和值，并允许对img标记进行更多的控制。

感谢您的解决方案-效果很好，但有点小问题。有时，附加图像不会立即显示在DIV中。有时，图像会在添加到selection-perfect时显示。然后，在其他时候，直到添加另外两个图像，它们才突然同时出现。不是一次一个，每次都是。知道为什么会这样吗？@Jas，我不确定。尝试在change函数中输入console.log或警报，查看处理程序是否总是被触发。

$("#collection").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += "<img src='" + $(this).val() + "' border='0' style='padding: 3px;' alt=\"" + $(this).text() + "\" /> ";
              });
          $("#imagePreview").html(str);
        })
        .change();
});