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标记进行更多控制。

Answer 2

来自the docs：

.val（）方法主要用于获取表单元素的值。在 <select multiple="multiple">元素的情况， .val（）方法返回一个数组包含每个选定的选项。

所以你只需要遍历src数组中的每个元素：

var src = $(this).val();

// Clear the preview area first
$('#imagePreview').empty();

// Loop through all selected options
for (var i = 0; i < src.length; i++) {
    $("#imagePreview").append($('<img>', {src: src[i]}));
}

请注意，我使用$('<img>', {src: src[i]})，这是一种使用动态属性创建元素的简单方法，而不是将字符串连接在一起。

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

2 个答案: