Jquery从表单中的选择/选项字段中显示div中的多个图像

Question

我需要一些帮助来找到一个 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>

非常感谢任何帮助!谢谢。

Answer 1

如果对任何人有帮助，我会根据解决方案进行构建并最终得到:

$("#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 标记。