jquery以表格形式在选择/选项字段中显示多个图像

我需要一些帮助来查找jQuery解决方案，以便从表单中选择的图像列表中显示预览DIV中的多个图像。jquery以表格形式在选择/选项字段中显示多个图像

例子：

<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>

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

来源

2011-04-01 Jas Lane

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]})，这是创造比将字符串连接在一起的动态属性的元素更简单的方法。

来源

2011-04-01 00:17:41

感谢您的解决方案 - 伟大的作品，但它有点毛病。有时，附加图像不会立即显示在DIV中。有时候，图像会随着它们被添加到选区而出现 - 完美。然后，在其他时间，直到添加另外两个图像，它们突然同时出现。每次都不是一次一个。任何想法为什么可能会发生？ – 2011-04-01 01:21:16

@Jas，我不确定。尝试在'change'函数内放入一个'console.log'或'alert'，看看处理程序是否总是被触发。 – 2011-04-01 03:13:06

如果有帮助的人，我建于解决方案，以结束：

$("#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标签更多的控制。

来源

2011-04-01 03:24:08

jquery以表格形式在选择/选项字段中显示多个图像

回答

相关问题