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以表格形式在選擇/選項字段中顯示多個圖像

回答

相關問題